如何使用jQuery或JavaScript去除内联样式

Question

如何移除 .dropdown 菜单旁边的这两个内联样式？我尝试了使用 removeAttr 属性 [ jQuery('.dropdown-menu').removeAttr('style'); ]，但不幸的是它并没有移除内联样式。每次我将鼠标悬停在导航上时，内联样式会更改为 display block，当鼠标移出时，内联样式被设置为 display:none。

<ul role="menu" class=" dropdown-menu" style="display: none;">
<ul role="menu" class=" dropdown-menu" style="display: block;">

这是我的代码。我试图在尺寸为767或媒体查询max-width(767)时移除它。

jQuery(window).resize(function() {
    var width = jQuery(window).width();
    if( width < 767 ) {
      jQuery('.dropdown-menu').removeAttr("style");
    }
});

jQuery(document).resize(function() {
    var width = jQuery(document).width();
    if( width < 767 ) {
      jQuery('.dropdown-menu').removeAttr("style");
    }
});

请查看附加的两张图片以获得更好的可视化效果

当我悬停在导航(About)上时，子页面显示(ul.dropdown-menu)，并且内联样式将设置为display block

当我悬停出导航(About)时，子页面(ul.dropdown-menu)的内联样式将设置为display none

请帮我去掉这两个内联样式style="display:none";和style="display:block";

- Melvin Rey

---

我可以问一下你想要摆脱它们吗？但是如果你真的想要移除它，尝试使用 $('.dropdown-menu').css("display","")。 - Carsten Løvbo Andersen

@carsten，我想要除去ul.dropdown-menu旁边的内联样式，这是当前的HTML：<ul role="menu" class=" dropdown-menu" style="display: none;">。我想要的效果是这样的：<ul role="menu" class=" dropdown-menu">，类dropdwon-menu旁边没有内联样式。 - Melvin Rey

你尝试过在CSS中强制使用它吗？并且使用CSS媒体查询代替。 - j-printemps

@j-printemps 我刚刚尝试了一下，使用CSS解决问题后，子页面在设置为display: none !important后无法打开。我想要实现的是删除内联样式display: none并显示块。我不希望我的移动视图中的子页面设置为悬停，因为这会导致糟糕的用户体验。在移动视图中，只有在点击导航时才应该显示子页面。 - Melvin Rey

@JonP 关于类内部的空格，我也注意到了。我认为这是默认设置，因为我正在使用Bootstrap Navwalker。我的网站是基于Bootstrap构建的，我将其转换为wordpress，并使用Navwalker在wordpress上运行Bootstrap导航栏。 - Melvin Rey

Answer 1

尝试使用show()

jQuery('.dropdown-menu').show()

或者 css()

jQuery('.dropdown-menu').css('display','block')

拖动fiddle的输出窗口。他们将在调整大小时显示菜单

演示Fiddle

- prasanth

---

不行。我不想显示它。我想完全摆脱除了.dropdown-menu之外的内联样式，因为在移动视图中，子页面悬停是一种不好的用户体验习惯。子页面应该只在单击导航父项时显示（例如：当我单击关于时，子页面将出现）。 - Melvin Rey

Answer 2

有一段 JavaScript 代码在添加这些样式。我猜你正在使用一些在互联网上找到的框架或模板。现在，你需要删除不必要的添加样式的代码（推荐！），或者绑定一个事件以每次删除它，类似于你所写的但是在不同的事件中：

jQuery('.dropdown-menu').hover(function() {
      jQuery('.dropdown-menu').removeAttr("style");
}, function() {
      jQuery('.dropdown-menu').removeAttr("style");
});

确保这段代码在首次添加样式的代码之后执行。

或者您可以尝试完全删除菜单的行为并编写自己的代码：

jQuery('.dropdown-menu').unbind();

- Samuil Petrov

Answer 3

尝试在主CSS文件末尾追加一个规则集声明，选择器为.dropdown-menu，属性为display:none，针对媒体查询<767：

@media screen and (max-width: 766px) {
    .dropdown-menu {
        display:none;
    }
}

- Ciro Corvino

Answer 4

你可以在移动端使用click替代hover，并在默认情况下设置display: none;，然后添加PC的媒体查询（这里是> 767px）来强制使用display: block;。好处是限制了JS的使用。

下面是一个可行的示例。 编辑 我更新了片段，并提供了一个更接近你代码的示例。

$('.menu-item').click(function() {
    $(this).toggleClass("active");
});

.menu-item .dropdown-menu {
  display: none;
}

.menu-item.active .dropdown-menu {
  display: block !important;
}

@media only screen and (min-width: 767px) {
  .menu-item .dropdown-menu {
    display: block !important;
  }
}

<ul role="menu" class="menu">
 <li class="menu-item">Menu 1</li>
 <li class="menu-item">
    Menu 2
  <ul role="menu" class="dropdown-menu" style="display: none;">
    <li>Submenu 1</li>
    <li>Submenu 2</li>
    <li>Submenu 3</li>
  </ul>
 </li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

- j-printemps