jQuery、別のリンクをクリックしたときのリンクの状態を変更します

Question

私はスライドアウトメニューで作業していますが、ドロップダウンリンクをクリックすると他の開いているリンクは閉じます。ここではjQueryのは、私がドロップダウンの状態に変更するためにクラスを追加するために実行していますされています。現在

(function ($) { 
    'use strict'; 

    var defaults = {}; 

    function Sidenav (element, options) { 
    this.$el = $(element); 
    this.opt = $.extend(true, {}, defaults, options); 

    this.init(this); 
    } 

    Sidenav.prototype = { 
    init: function (self) { 
     self.initToggle(self); 
     self.initDropdown(self); 
    }, 

    initToggle: function (self) { 
     $(document).on('click', function (e) { 
     var $target = $(e.target); 

     if ($target.closest(self.$el.data('sidenav-toggle'))[0]) { 
      self.$el.toggleClass('show'); 
      $('body').toggleClass('sidenav-no-scroll'); 

      self.toggleOverlay(); 

     } else if (!$target.closest(self.$el)[0]){ 
      self.$el.removeClass('show'); 
      $('body').removeClass('sidenav-no-scroll'); 

      self.hideOverlay(); 
     } 
     }); 
    }, 

    initDropdown: function (self) { 
     self.$el.on('click', '[data-sidenav-dropdown-toggle]', function (e) { 
     var $this = $(this); 

     $this 
      .next('[data-sidenav-dropdown]') 
      .slideToggle('fast'); 

     $this 
      .toggleClass('show'); 

     e.preventDefault(); 
     }); 
    }, 

    toggleOverlay: function() { 
     var $overlay = $('[data-sidenav-overlay]'); 

     if (!$overlay[0]) { 
     $overlay = $('<div data-sidenav-overlay class="sidenav-overlay"/>'); 
     $('body').append($overlay); 
     } 

     $overlay.fadeToggle('fast'); 
    }, 

    hideOverlay: function() { 
     $('[data-sidenav-overlay]').fadeOut('fast'); 
    } 
    }; 

    $.fn.sidenav = function (options) { 
    return this.each(function() { 
     if (!$.data(this, 'sidenav')) { 
     $.data(this, 'sidenav', new Sidenav(this, options)); 
     } 
    }); 
    }; 
})(window.jQuery); 

、データsidenav-ドロップダウンでリンクがクリックされたときに、私は「ショー」のクラスを追加していをし、 cssの表示を「ブロック」に変更します。私は、リンクがクリックされたときに他のオープンドロップダウンから「ショー」のクラスを削除するには、引数を作成する方法がわからないです。私は一度に1つだけ開いてほしい。これが理にかなってほしい。

Answer 1

：

は、以下の新しいコメント行を参照してください。子要素ulを見つけるために$ thisを変更し、引数を使用してクリック時にそれらをすべて非表示にしました。

クラス「ショーは」トグルを離れて行かないと、別の小さなしゃっくりを引き起こしたので、私はクリックでそれを削除するだけでなく、それを選び出す必要がありました。

initDropdown: function (self) { 
     self.$el.on('click', '[data-sidenav-dropdown-toggle]', function (e) { 
     var $this = $(this).parent().find('[data-sidenav-dropdown]'); 

     $('[data-sidenav-dropdown]').not($this).hide(); 
     $('.sidenav-link-title').not($this).removeClass('show'); 

     $this 
     .slideToggle('fast'); 

     $this.parent() 
     .toggleClass('show'); 

     e.preventDefault(); 
     }); 
    }, 

Answer 2

あなたのHTMLは見ていませんが、同じコンテナ内でトグルが隣接していると仮定すると、jQuery .siblings()を使用して、.showクラスを既存の要素から削除できます。私は兄弟が仕事を得ることができませんでしたが、この回避策で、私はそれが働いてしまった

initDropdown: function(self) { 
 
    self.$el.on('click', '[data-sidenav-dropdown-toggle]', function(e) { 
 
    var $this = $(this); 
 

 
    $this 
 
     .next('[data-sidenav-dropdown]') 
 
     .slideToggle('fast'); 
 

 
    $this 
 
     .toggleClass('show') 
 
     .siblings('.show').removeClass('show'); // remove class show from siblings with it 
 

 
    e.preventDefault(); 
 
    }); 
 
},