부모 외부에서 자바 스크립트 전환

Question

부모 컨테이너 외부의 요소를 사용하여 div을 토글하는 이벤트를 배치 할 때 문제가 있습니다.

span 태그를 사용하여 부모 요소 외부에서 동일한 동작을 타겟팅하려고합니다.

도움이된다면 감사드립니다.

HTML :

<div class='toggle_parent'> 
    <div class='toggleHolder'> 
     <span class='toggler'>Open</span> 
     <span class='toggler' style='display:none;'>Close</span> 
    </div> 

    <div class='toggled_content' style='display:none;width:100%;height:400px;'> 
     <h2>Hello This Is My Content Right Here</h2> 
     <span class='toggler btn btn-large'>Close</span>  
    </div> 
</div> 



<!-- I need this element to trigger from outside --> 
<span class="toggler btn btn-large btn-info">Gain Early Access</span> 

자바 스크립트 :

$('.toggler').live('click',function(){ 
/* $(this).parent().children().toggle(); //swaps the display:none between the two spans */ 
$(this).parent().parent().find('.toggled_content').slideToggle(); //swap the display of the main content with slide action 

}); 

Answer 1

예제를 수정하여 목적에 맞게 수정하십시오.

<div id="container"> 
    <div> 
     <div> 
      <span class='open'>Open</span> 
      <span class='close' style='display:none;'>Close</span> 
     </div> 

     <div class='content' style='display:none;width:100%;height:400px;'> 
      <h2>Hello This Is My Content Right Here</h2> 
      <span class='close'>Close</span>  
     </div> 
    </div> 
    <!-- I need this element to trigger from outside --> 
    <span class="toggle">Gain Early Access</span> 
</div> 

$(".toggle").click(function() { 
    $(".content").slideToggle(); 
}); 
$(".open").click(function() { 
    $(".content").slideDown(); 
}); 
$(".close").click(function() { 
    $(".content").slideUp(); 
}); 

Answer 2

그냥 글로벌 상위 DIV를 사용합니다.

<div id="container"> 
    <div class='toggle_parent'> 
     <div class='toggleHolder'> 
      <span class='toggler'>Open</span> 
      <span class='toggler' style='display:none;'>Close</span> 
     </div> 

     <div class='toggled_content' style='display:none;width:100%;height:400px;'> 
      <h2>Hello This Is My Content Right Here</h2> 
      <span class='toggler btn btn-large'>Close</span>  
     </div> 
    </div> 


    <!-- I need this element to trigger from outside --> 
    <span class="toggler btn btn-large btn-info">Gain Early Access</span> 
</div> 

그리고 당신은 그냥이 작업을 수행 할 수 있습니다

var container = $('#container'); 
container.on('click', '.toggler', function() { 
    container.find('.toggleHolder .toggler').toggle(); 
    container.find('.toggle_content').slideToggle(); 
}); 

을 그건 그렇고, 당신은 jQuery를 1.7 이상 사용하는 경우, live가되지 않습니다. http://api.jquery.com/live/