jQuery，當點擊另一個鏈接時，改變鏈接的狀態

我在滑出菜單上工作，一切正常，除非我想單擊下拉鍊接時打開任何其他打開的鏈接。這裏是jQuery的我正在添加一個類來改變下拉的狀態：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中的顯示更改爲「block」。我不確定如何在單擊鏈接時從其他打開的下拉列表中刪除「show」類。我只想要一次打開一個。希望這是有道理的。

來源

2017-08-17 RiotAct

我不能讓兄弟姐妹的工作，但這種解決方法我得到它的工作。我改變$這個來找到孩子的ul元素，然後用一個參數在點擊時隱藏所有的元素。

這導致了另一個類似「show」的小問題，在切換時不會消失，所以我必須單擊它才能在點擊時將其刪除。

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(); 
     }); 
    },

來源

2017-08-17 07:02:51 RiotAct

我們還沒有看到您的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(); 
 
    }); 
 
},

來源

2017-08-17 00:22:29

jQuery，當點擊另一個鏈接時，改變鏈接的狀態

回答

相關問題