0

ボタンをクリックすると下にスライドするパネルがあります。また、ページの下部に同じペインを切り替える別のボタンがあります。問題は、それらが互いに独立して機能するため、ボタンがクリックされると、チェーンが最初からやり直されることです。

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、、互いに同期して動作する必要があります。

4

2 に答える 2

0

別の関数を作成してビデオペインを切り替え、クリックすると他の要素から呼び出します。

$("#videoPane a, #b4").click(function (e) {
    e.preventDefault();
    toggleVideoPane();
});

var toggleVideoPane = function () {
    var $videoPane = $('#videoPane');
    if ($videoPane.hasClass('videoExpanded')) {
        $("#videoPane").removeClass("videoExpanded");
        $("#b4").removeClass("activeBtn");        
    ​} else {
        $("#videoPane").addClass("videoExpanded");
        $("#b4").addClass("activeBtn");            
    }
};​​​​​​​​​
于 2012-10-25T20:23:22.017 に答える
0

どうですか

$("#videoPane a, #b4").click( function( e ) { 
    $("#videoPane").toggle( );
});

それがあなたがやろうとしていることだと思います。トグルの詳細については、こちらをご覧ください。

ここでフィドル

于 2012-10-25T20:26:25.590 に答える