jquery - 特定类上的 jQuery toggleClass

Question

我制作了这个 jQuery 代码来切换类以打开和关闭。但是当我单击仪表板导航器时，它也会影响其他类

这是我的示例代码。

JavaScript：

$(document).ready(function(){
    $('ul.nav li a#mainnav').click(function(){
        $('ul.nav li ul').toggleClass('opened');
    });
});

CSS：

div#wrapper div#main_sidebar ul.nav li ul.closed{
    height: 0;
    overflow: hidden;
}
div#wrapper div#main_sidebar ul.nav li ul.opened{
    height: auto;
}

HTML：

<div id="main_wrapper">
    <div id="wrapper">
        <div id="main_sidebar">
            <ul class="nav">
                <li>
                    <a id="mainnav">Dashboard</a>
                    <ul class="closed opened">
                        <li><a href="#">Menu Manager</a></li>
                        <li><a href="#">Script Pages</a></li>
                        <li><a href="#">Plugin Manager</a></li>
                        <li><a href="#">User Manager</a></li>
                    </ul>
                </li>
                <li>
                    <a id="mainnav">Settings</a>
                    <ul class="closed">
                        <li><a href="#">Post settings</a></li>
                        <li><a href="#">User settings</a></li>
                        <li><a href="#">Permalink Structure</a></li>
                    </ul>
                </li>
                <li>
                    <a>Edit</a>
                    <ul id="main_nav" class="closed">
                        <li><a href="#">Edit Posts</a></li>
                        <li><a href="#">Edit Pages</a></li>
                        <li><a href="#">Edit Links</a></li>
                        <li><a href="#">Edit Menu Items</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

Answer 1

为了仅切换特定列表，请使用next()or siblings("ul")：

$("#mainnav").click(function() {
    $(this).next().toggleClass("opened");
});​

演示：http: //jsfiddle.net/efAZU/10/

Answer 2

click单击 mainNav 后，您将使用选择器切换所有这些，而不是在您的函数中尝试这样的操作：

$(this).siblings('ul').toggleClass('opened');

如果你想要幻灯片效果，你可以使用slideToggle()代替。