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);

目前，当点击带有data-sidenav-dropdown的链接时，我正在添加一个＆＃34; show＆＃34;并将css中的显示更改为＆＃34; block＆＃34;。我不知道如何删除＆＃34; show＆＃34;单击链接时从其他打开的下拉列表中。我只希望一次打开一个。希望这是有道理的。

Answer 1

我们还没有看到您的HTML，但假设您的切换在同一容器中相邻，您可以使用jQuery .siblings()从现有元素中删除.show类。

请参阅下面的新注释行：

＆＃13;

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

＆＃13;

Answer 2

我无法让兄弟姐妹工作，但通过这种解决方法我得到了它的工作。我更改了$ this以查找子ul元素，然后使用参数在点击时隐藏所有这些元素。

这引起了另一个小小的打击，因为班级“节目”不会在切换时消失，所以我不得不将其单独输出以便在点击时移除它。

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

jQuery，在单击另一个链接时更改链接的状态

2 个答案: