2017-04-23 21 views
1

私はモジュラー化を始めているタブ付けモジュールを持っています。基本機能は動作していますが、slideUp機能は初めて起動した後に起動していないようです。代わりに、タブはちょうどお互いの上に横たわっています。あなたはslideUp関数の第二引数としてthis.showPanel()の結果を渡している.slideUp(300, this.showPanel());呼んで、しかし、あなたが望むことはときslideUpアニメーションコールバックとしてthis.showPanelを実行することですhidePanel機能でタブ移動モジュールで最初に起動された後にスライドが起動しない

(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

完了です。

のであなただけではなく、その結果の2番目の引数としてshowPanel機能のコピーを渡す必要がありことを修正するには:

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

素晴らしい。魅力のように働いた。なぜ私は結果を渡していたので、今度は一度は動作していたのですが、もう一度動作していないことを理解できます私はまだバインディングがどのように動作するか完全に理解していません。ありがとうございました。 – user3390496

+0

'.bind(this)'呼び出しは、コピーされている関数の中に 'this'キーワードのカスタム値を持つ関数のコピーを作成するだけです。これにより、コールバック関数スコープの代わりに 'this 'の値として' var tabbing'を使用することができます。 2番目の引数としてのコールバックは、アニメーションが終了したときに関数が実行されることを期待しているので、呼び出す関数のコピーを渡します。これがあなたに役立った場合、それを正しい答えとしてマークしてください:) –

関連する問題