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

【问题标题】：How to get rid the inline style using jquery or javascript如何使用 jquery 或 javascript 摆脱内联样式
【发布时间】：2017-06-01 06:06:03
【问题描述】：

如何删除 .dropdwon 菜单旁边的这两个内联样式，我尝试了删除属性 [ 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 或 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）并且内联样式将设置为显示块

当我将鼠标悬停在 nav(About) 上时，子页面 (ul.dropdown-menu) 内联样式将设置为 display none

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

【问题讨论】：

请问您想摆脱它们吗？，但如果你真的想删除它，试试$('.dropdown-menu').css("display","")
使用 $('element').css('display','none');你想要的地方
.hide() 和 .show() 等函数通过添加内联样式来工作。您是否在脚本中使用它们？
@carsten 我想去掉 ul.dropdown-menu 旁边的内联样式，这里是当前的 html
你试过在 CSS 中强制它吗？并改用 CSS 媒体查询。

标签： javascript jquery css

【解决方案1】：

试试show()

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

或css()

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

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

Demo Fiddle

【讨论】：

不。我不想表现出来。我想完全摆脱 .dropdown-menu 旁边的内联样式，因为在移动视图中，子页面悬停在 ux 中是不好的习惯。子页面应仅在单击导航父级时显示（例如：当我单击关于时，子页面将出现）

【解决方案2】：

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

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

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

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

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

【讨论】：

【解决方案3】：

尝试在主 css 文件的末尾附加一个规则集声明 .dropdown-menu 选择器，其属性为 display:none 用于媒体查询

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

【讨论】：

【解决方案4】：

您可以在移动设备上使用click 而不是hover，默认情况下，display: none; 在 CSS 中设置。然后为 PC 添加一个媒体查询（此处> 767px）以强制display: block;。好在你限制了 JS 的使用。

这是一个可以做的工作示例。

编辑

我用一个更接近你的代码的例子更新了 sn-p。

$('.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>

【讨论】：