Question

我有一个标签模块，我开始模块化。基本功能正在运行，但是第一次触发后，slideUp功能似乎没有触发。相反，标签只是放在彼此的顶部。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

所以修复你只需要将slideUp函数的副本作为第二个参数传递而不是结果：

showPanel

在第一次触发Tab键模块后，SlideUp未触发

1 个答案: