두 요소가 같은 요소로 전환되어 동기화해야합니다.

Question

버튼을 클릭하면 아래로 슬라이드하는 패널이 있습니다. 나 또한 같은 창을 토글하는 페이지의 buttom에 다른 버튼이 있습니다. 문제는 서로 독립적으로 작동하므로 버튼을 클릭하면 체인이 시작된다는 것입니다.

내가 모두 a.vidbtn 및 a.close가 동일한 작업을 수행하고자하는

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

HTML : 패널 개방; 그러나 그들은 서로에게 일해야합니다.

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

코드는 간단하다 : 다음과 같이

내 JQuery와는 둘 다 같은 요소 #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을 참조하십시오.

나는 catch되지 않은 구문 에러를 얻고있다 here