Question

我已经制作了这个jQuery代码，可以打开和关闭类。但是当我点击Dashboard导航器时，它也会影响其他类

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()或siblings("ul")：

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

DEMO： http://jsfiddle.net/efAZU/10/

Answer 2

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

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

如果您想要幻灯片效果，可以改用slideToggle()。

特定类的jQuery toggleClass

2 个答案: