ボタンをクリックすると下にスライドするパネルがあります。また、ページの下部に同じペインを切り替える別のボタンがあります。問題は、それらが互いに独立して機能するため、ボタンがクリックされると、チェーンが最初からやり直されることです。
HTML
<div id="videoPane">
content inside panel
//NOTE: the below anchor has a negative bottom margin, so it remains in plain view when the panel is closed.
<a href="#" class="close"><img src="images/arrow.png"></a>
</div>
<div id="footerNav">
<a class="vidbtn" id="b4" href="#">Watch Video</a>
</div>
a.vidbtn
両方とも同じタスクを実行したいと思いa.close
ます。パネルを開きます。ただし、それらは互いに連携する必要があります。
私のJqueryは次のとおりです。
$("#videoPane a").toggle(function(e){
$("#videoPane").addClass("videoExpanded");
$("#b4").addClass("activeBtn");
e.preventDefault();
}, function(e){
$("#videoPane").removeClass("videoExpanded");
$("#b4").removeClass("activeBtn");
e.preventDefault();
});
$("#b4").toggle(function(e){
$("#videoPane").addClass("videoExpanded");
$("#b4").addClass("activeBtn");
e.preventDefault();
}, function(e){
$("#videoPane").removeClass("videoExpanded");
$("#b4").removeClass("activeBtn");
e.preventDefault();
});
コードは単純です。どちらも同じ要素を切り替え#videoPane
、、互いに同期して動作する必要があります。