-2

クラスを開いたり閉じたりするように切り替えるこの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>
4

2 に答える 2

2

特定のリストのみを切り替えるには、next()またはsiblings("ul")：を使用します。

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

デモ：http： //jsfiddle.net/efAZU/10/

于 2012-10-17T16:03:26.477 に答える
1

mainNavをクリックすると、セレクターでそれらすべてを切り替えることになります。代わりに、click関数で次のようなことを試してください。

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

スライド効果が必要な場合は、代わりにslideToggle（）を使用できます。

于 2012-10-17T16:06:22.560 に答える