0

私はこのトグルをスライドさせてメニューを開き、アクティブなクラスを追加して開いていることを知らせています。これを一緒に石畳にしましたが、不具合があります。

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

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

他のボタンをクリックしてもアクティブなままなので、閉じない限りアクティブなままです。

ページ上の他のリンクをクリックした場合、アクティブなクラスを削除することはできますか？したがって、これとは別のトグルメニューがある場合でも、理想的には任意のリンクがあります。

http://jsfiddle.net/24k5U/2/

あなたが見ることができるようにあなたはオレンジ/アクティブなボタンの塊を手に入れます

どんな助けでも素晴らしいでしょう。

4

2 に答える 2

1

$('.active').removeClass('active');クリックイベントにを追加します。それはそれを修正する必要があります。

このようにして、コードは次のようになります。

$(".parents-toggle > a").click(function () {
    $('.active').removeClass('active');  // <---- This line added
    $(this).toggleClass('active');
    $(".parents-toggle > ul.sub-menu").not($(this).siblings()).slideUp();
    $(this).siblings(".sub-menu").slideToggle();
});

class=active基本的に、あなたがしていることは、あなたがリンクをクリックする前に、とのリンクがないことを確認することですtoggleClass()。

内部リンクまたはサブリンクに対しても同じことができます。

于 2012-11-21T12:00:48.013 に答える
0

他の要素に適用する前に、同じレベルの他の要素からクラスを削除します。

  $(".parents-toggle > a").click(function () {
      $(".parents-toggle > a").removeClass('active');
      $(this).toggleClass('active');
      $(".parents-toggle > ul.sub-menu").not($(this).siblings()).slideUp();
      $(this).siblings(".sub-menu").slideToggle();
  });
于 2012-11-21T11:58:46.770 に答える