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

【问题标题】：query add .css if div has active class如果 div 有活动类，则查询添加 .css
【发布时间】：2014-03-25 19:42:30
【问题描述】：

这个 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 add .css display: block。但是当第二个链接 jquery 处于活动状态时，不要添加 .css display: block。

有人能帮帮我吗？谢谢你。

【问题讨论】：

ID 在文档上下文中必须是唯一的。改用类
@DhavalMarthak 这不是语法错误
你有 ID 重复 - 将其更改为类
另外<ul> 没有结束标签。那里也有错误。
我应该更改哪个 ID？左菜单还是子菜单？

标签： jquery html css

【解决方案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();
});

顺便说一句，您可以使用：$(".left-menu.active").next('.submenu').show();

SEE DEMO

【讨论】：

我试过你的版本，但它不工作。当我查看您的演示时，它对我也不起作用。
更新的答案，应该是 next() 而不是 find() 我的错！
感谢 A.Wolff 和其他人的快速帮助。您的解决方案完全符合我的需要。再次感谢您。

【解决方案2】：

浏览器只会渲染第一个Id id=left-menu。

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

如果你真的需要一个元素上的额外标识符，你应该考虑使用多个类名或数据属性来对应额外的数据。

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

【讨论】：