2017-04-23 111 views
1

我有一个模块,我开始模块化。基本功能正在工作,但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>

+0

我创建你在这里的一个片段。 – mplungjan

+0

对不起@mplungjan我看不到你的片段... – user3390496

+0

啊哈理解你。我是新来张贴在这里。感谢您的领导! – user3390496

回答

1

在当你调用.slideUp(300, this.showPanel());你逝去的this.showPanel()结果作为slideUp函数的第二个参数,但你想要的是执行this.showPanel作为回调时slideUp动画hidePanel功能做完了。

所以来修复你只需要在showPanel功能的副本作为第二个参数,而不是它的结果通过:

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

令人惊叹。像魅力一样工作。我现在可以理解为什么它只是一次工作,但不是因为我通过了结果。尽管如此,我仍然不完全理解Binding的工作原理。谢谢。 – user3390496

+0

'.bind(this)'调用只是为被复制的函数内的'this'关键字创建一个具有自定义值的函数副本。这可以让'var tabbing'作为'this'的值而不是回调函数的作用域。至于回调作为第二个参数,它只是期望一个函数在动画完成时被执行,这就是为什么我们传入一个我们想调用的函数的副本。如果这对你有帮助,请将其标记为正确答案:) –