0

私は完璧に機能しているシンプルなトグルを持っています.

html..

<ul>
    <li id="menu-item-346" class="parents-toggle"><a href="#">Parent Button</a>

        <ul class="sub-menu">

            <li id="menu-item-347" class="parents-toggle-inner"><a href="#">Child Button</a>

            <ul class="sub-menu">
                <li id="menu-item-348" class="menu-item">Button</a></li>
                <li id="menu-item-349" class="menu-item">Button</a></li>
            </ul>
    </li>
</ul>

jクエリ....

 $(".parents-toggle > a").click(function () {
         $(".parents-toggle > ul.sub-menu").not($(this).siblings()).slideUp();
         $(this).siblings(".sub-menu").slideToggle();
      });

      $(".parents-toggle-inner > a").click(function () {
         $(".parents-toggle-inner > ul.sub-menu").not($(this).siblings()).slideUp();
         $(this).siblings(".sub-menu").slideToggle();
      });

ボタンをクリックしてメニューを折りたたんだときに、アクティブなクラスがその特定のボタンに追加される可能性はありますか?

4

1 に答える 1

0

もちろん、このjsFiddleの例のようなjQueryのtoggleClass()関数を利用してください。

$(".parents-toggle > a").click(function() {
    $(this).toggleClass('toggled');
    $(".parents-toggle > ul.sub-menu").not($(this).siblings()).slideUp();
    $(this).siblings(".sub-menu").slideToggle();
});

$(".parents-toggle-inner > a").click(function() {
    $(this).toggleClass('toggled');
    $(".parents-toggle-inner > ul.sub-menu").not($(this).siblings()).slideUp();
    $(this).siblings(".sub-menu").slideToggle();
});​

関数に追加$(this).toggleClass('toggled');することで、必要に応じてクラスを追加/削除できます。

于 2012-11-19T17:08:40.033 に答える