9

我正在使用 wordpress 3.5 并创建带有子菜单的菜单。它的结构是这样的：

<ul class="menu">
    <li id="menu1">Menu 1</li>
    <li id="menu2">Menu 2</li>
    <li id="menu3" style="z-index:100;">
        Menu 3
        <ul class="submenu">
            <li id="submenu1">submenu1</li>
            <li id="submenu2">submenu2</li>
            <li id="submenu3">submenu3</li>
        </ul>
    </li>
</ul>

问题是带有子菜单的菜单，它自动附加了一个值为 100 的 z-index。我不希望它是那样的，因为它给我添加 lavalamp 效果到这些菜单时带来了麻烦。

在使用 wp_nav_menus 创建菜单之后，我尝试使用 jquery 编辑 z-index，如下所示：

jQuery(document).ready(function(){
     jQuery("#menu3").css("z-index", "0");
});

但不幸的是，它不起作用。如何删除该内联 CSS 样式？

4

4 回答 4

23

removeAttribute如果要删除使用 javascript 手动添加的所有内联样式，请使用该方法。

element.removeAttribute("style")
于 2013-01-17T16:33:04.920 回答
5

将 z-index 重置为初始值

您可以简单地将 z-index 重置为其初始值，使其表现得就像li没有样式声明的情况一样：

$(function(){
    $('#menu3').css('z-index', 'auto');
});

您可以使用普通的 javascript（代码应该在您的菜单 html 加载后运行）：

// If you're going for just one item
document.querySelector('#menu3').style.zIndex = 'auto';

删除样式属性

您可以使用 jQuery 从所有列表中删除样式属性：

注意：请记住，这将删除所有使用 style 属性设置给您的元素的样式。

$(function(){
    $('#menu3').removeAttr('style');
});

或香草：

// Vanilla
document.querySelector('#menu3').style = '';
于 2013-01-17T16:43:22.783 回答
2

如果要删除所有内联样式，Pranay 的答案是正确的：

$("#elementid").removeAttr("style")

如果您只想删除一个样式属性，例如 z-index，则将其设置为空值：

$("#elementid").css("zIndex","")

来自 jQuery 文档（http://api.jquery.com/css/）：

将样式属性的值设置为空字符串 — 例如 $('#mydiv').css('color', '') — 如果该属性已被直接应用，则从元素中删除该属性，无论是在 HTML 样式中属性，通过 jQuery 的 .css() 方法，或者通过 style 属性的直接 DOM 操作。

于 2013-01-17T16:45:52.137 回答
0

这是我认为更好的方法，因为它只删除 z-index 样式而不是整个样式属性。这是一个工作小提琴。

//As commented by @DA this is enough
$("#elementid").css("zIndex","")

//this could be useful in another situation so I will leave it :) 
$(document).ready(function () {
  $('#menu3').attr('style', function(i, style){
    return style.replace(/\z-index\b[^;]+;?/g, '');
  });
});

希望能帮助到你。

于 2013-01-17T16:44:04.247 回答