如何使用jquery或javascript摆脱内联样式

Question

如何在.dropdwon菜单旁边删除这两个内联样式，我尝试了remove属性[ jQuery（'。dropdown-menu'）。removeAttr（'style'）; ]很遗憾它没有不删除内联样式。每当我将鼠标悬停在导航栏上时内联样式更改为显示块，当它悬停时，内联样式设置为显示：无

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

这是我的代码。我试图在767或mediaquery 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");
    }
});

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

当我悬停导航（关于）子页面显示（ul.dropdown-menu）时，内联样式将设置为显示块

当我将鼠标悬停在导航栏（关于）时，子页面（ul.dropdown-menu）内联样式将设置为显示无

请帮我摆脱这两种内联风格的风格=“display：none”;和style =“display：block”;

Answer 1

尝试使用show()

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

或 css()

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

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

Demo Fiddle

Answer 2

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

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

确保这是在首先添加样式的代码之后。

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

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

Answer 3

您可以将click代替hover用于移动设备，默认情况下display: none;设置为CSS。然后为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>

Answer 4

尝试在主css文件的末尾附加.dropdown-menu选择器上的规则集声明，其中包含属性display:none，用于media-query＆lt; 767：

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