Question

当您点击按钮时，我有一个向下滑动的面板。我还在页面的buttom上有另一个按钮切换同一个窗格。问题是，它们彼此独立工作，因此当单击一个按钮时，它会启动链。

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，并且它们需要同步工作。

Answer 1

创建一个单独的函数来切换视频窗格，然后在点击其他元素时调用它：

$("#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");            
    }
};

Answer 2

怎么样？

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

我认为这就是你要做的。有关切换的详细信息，请查看here。

小提琴here

两个Toggles在同一个元素上，需要它们同步

2 个答案: