Question

我遇到了这个jquery代码的问题：

jQuery(document).ready(function($) {
    if ($('#left-menu').hasClass('active')){
        console.log(true);
        $("#submenu").css("display", "block");
    };
});

使用此功能，我需要将.css显示块添加到子菜单

<ul>
    <li>
        <a class="active" id="left-menu">Test</a>
        <ul style="display: none" id="submenu">
            <li>test</li>
            <li>test</li>
        <ul>
    </li>
    <li>
        <a id="left-menu">Test 2 </a>
        <ul style="display: none" id="submenu">
            <li>test</li>
            <li>test</li>
        <ul>
    </li>
</ul>

现在我将描述问题所在。当活动时，第一个链接一切正常，jquery添加.css display：block。但是当活动时第二个链接jquery不添加.css display：block。

你能帮助我吗？谢谢。

Answer 1

ID必须是唯一的，因此请改为:(并关闭所有UL标签）

<ul>
    <li>
        <a class="left-menu">Test</a>
        <ul style="display: none" class="submenu">
            <li>test</li>
            <li>test</li>
        </ul>
    </li>
    <li>
        <a class="left-menu active">Test 2 </a>
        <ul style="display: none" class="submenu">
            <li>test</li>
            <li>test</li>
        </ul>
    </li>
</ul>

然后：

jQuery(document).ready(function($) {    
        $(".left-menu.active").next('.submenu').show();
});

BTW，您可以使用：$(".left-menu.active").next('.submenu').show();

SEE DEMO

Answer 2

浏览器只会呈现第一个ID id=left-menu。

浏览器似乎忽略了第二个ID，因为这是输出HTML：

如果您确实需要元素上的其他标识符，则应考虑使用多个类名或数据属性来对应其他数据。

<a class="active left-menu">Test</a>

如果div具有活动类，则查询添加.css

2 个答案: