滑動模塊在觸發模塊上第一次觸發後沒有觸發

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

在當你調用.slideUp(300, this.showPanel());你逝去的this.showPanel()結果作爲slideUp函數的第二個參數，但你想要的是執行this.showPanel作爲回調時slideUp動畫hidePanel功能做完了。

所以來修復你只需要在showPanel功能的副本作爲第二個參數，而不是它的結果通過：

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