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 回答