SlideUp 在 tabbing 模块上第一次触发后不触发

Question

我有一个标签模块，我正开始模块化。基本功能正常，但 slideUp 函数在第一次触发后似乎没有触发。相反，选项卡只是一个接一个地重叠。

(function() {


  var tabbing = {
    init: function() {
      this.cacheDom();
      this.bindEvents();
    },
    cacheDom: function() {
      this.el = $('.js-tab-panels');
      this.tabs = this.el.find('.js-tabs');
      this.navItem = this.tabs.find('.nav-item');
      this.panel = this.navItem.closest(this.el);
    },
    bindEvents: function() {
      this.navItem.on('click', this.toggleActive.bind(this));
    },
    toggleActive: function(el) {
      this.panel.find('.js-tabs li.active').removeClass('active');
      var add = $(el.target).closest(this.navItem);
      add.addClass('active');

      this.hidePanel();
    },
    hidePanel: function() {
      this.panel.find('.panel.active').slideUp(300, this.showPanel());

    },
    showPanel: function() {
      var panelToShow = this.panel.find('.js-tabs li.active').attr('rel');
      this.panel.find('.panel.active').removeClass('active');
      $('#' + panelToShow).slideDown(300, function() {
        $(this).addClass('active');
      });
    }


  };

  tabbing.init();

})()

body {
  background: #fafafa;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
}

.tab-panels ul {
  margin: 0;
  padding: 0;
}

.tab-panels ul li {
  list-style-type: none;
  display: inline-block;
  background: #999;
  margin: 0;
  padding: 3px 10px;
  border-radius: 10px 10px 0 0;
  color: #fff;
  font-weight: 200;
  cursor: pointer;
}

.tab-panels ul li:hover {
  color: #fff;
  background: #666;
}

.tab-panels ul li.active {
  color: #fff;
  background: #666;
}

.tab-panels .panel {
  display: none;
  background: #c9c9c9;
  padding: 30px;
  border-radius: 0 0 10px 10px;
}

.tab-panels .panel.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="js-tab-panels tab-panels">
  <ul class="js-tabs tabs">
    <li rel="panel1" class="nav-item active">panel1</li>
    <li rel="panel2" class="nav-item">panel2</li>
    <li rel="panel3" class="nav-item">panel3</li>
    <li rel="panel4" class="nav-item">panel4</li>
  </ul>

  <div id="panel1" class="panel active">
    content1<br/> content1
    <br/> content1
    <br/> content1
    <br/> content1
    <br/>
  </div>
  <div id="panel2" class="panel">
    content2<br/> content2
    <br/> content2
    <br/> content2
    <br/> content2
    <br/>
  </div>
  <div id="panel3" class="panel">
    content3<br/> content3
    <br/> content3
    <br/> content3
    <br/> content3
    <br/>
  </div>
  <div id="panel4" class="panel">
    content4<br/> content4
    <br/> content4
    <br/> content4
    <br/> content4
    <br/>
  </div>
</div>

Answer 1

在 hidePanel 函数中，当您调用 .slideUp(300, this.showPanel()); 时，您将 this.showPanel() 的结果作为 slideUp 函数的第二个参数传递，但您想要的是当 slideUp 动画完成时执行 this.showPanel 作为回调。

所以要解决这个问题，您只需传入 showPanel 函数的副本作为第二个参数而不是其结果：

...slideUp(300, this.showPanel.bind(this));

SlideUp 在 tabbing 模块上第一次触发后不触发

SlideUp not firing after first time triggered on tabbing module

javascript

jquery

modularity

slideup

tabbing