링크를 클릭 할 때 div를 확장하는 jQuery 이벤트 핸들러 추가하기

Question

일부 div를 확장/숨기기 위해 jQuery를 사용하고 있습니다. 링크를 클릭 할 때 해당 div를 열 수 있도록 이벤트 처리기를 추가해야합니다. 전환 된 각 div에는 고유 한 클래스가 할당됩니다. 이벤트 처리기를 작성하는 방법에 대한 조언을 찾고 있습니다.

JQuery와

$(document).ready(function(){ 

$(".toggle_container:not(:first)").hide(); 
$(".toggle_container:first").show(); 
$("h6.trigger:first").addClass("active"); 

$("h6.trigger").click(function(){ 
    $(this).toggleClass("active"); 
    $(this).next(".toggle_container").slideToggle(300); 
}); 

는 CSS :

// uses a background image with an on (+) and off (-) state stacked on top of each other 
h6.trigger { background: url(buttonBG.gif) no-repeat;height: 46px;line-height: 46px;width: 300px;font-size: 2em;font-weight: normal;} 
h6.trigger a {color: #fff;text-decoration: none; display: block;} 
h6.active {background-position: left bottom;} 
.toggle_container { overflow: hidden; } 
.toggle_container .block {padding: 20px;} 

HTML과 같은 링크 목록 가지고 열

<a href="#">One</a> 
<a href="#">Two</a> 

및 coorisponding div가 :

을

<h6 class="trigger">Container one</h6> 
<div class="toggle_container"> 
div one 
</div> 

<h6 class="trigger">Container two</h6> 
<div class="toggle_container Open"> 
div one 
</div> 

앞서 언급했듯이이 작업을 용이하게 할 고유 한 클래스를 할당 할 것입니다.

어떤 조언이 필요합니까? 감사!

• 내가 링크가 인스턴스에 대한 탐색에서, 페이지의 다른 부분에서 클릭 할 때 특정 사업부를 개방 전환 이벤트 핸들러를 구축하기위한 몇 가지 조언을 찾고 있어요 명확합니다.

Answer 1

내가 이렇게 당신의 요소를 배치 할 : (선호 대신

<a class="toggler" href="#div1">Click</div> 
<a class="toggler" href="#div2">Click</div> 
<div class="toggle-container" id="div1"> 
Hello 
</div> 
<div class="toggle-container" id="div2"> 
Hello 
</div> 

) 클래스 고유의 ID를 사용하여 다음에 JS가 될 것이다 :

$('div.toggle-container').hide().first().show().addClass('active'); 
$('a.toggler').bind('click', function (e) { 
    var href = $(this).attr('href'); 
    $('div.active').hide().removeClass('active'); 
    $(href.slice(href.indexOf("#"))).show().addClass('active'); 

    event.preventDefault(); 
}); 

고유 한 클래스를 사용하려면 선택기를 다음과 같이 수정하십시오.

$("." + href.slice(href.indexOf("#") + 1)).show().addClass('active'); 

Answer 2

이 같은 특정 헤더 클릭 이벤트를 트리거 할 수 있습니다 : 그것은 이미 열려 있다면

<h6 class="trigger" id="myHeader">Container two</h6> 
<div class="toggle_container Open"> 
div one 
</div> 


$('#myHeader').click(); 

이 컨테이너를 숨 깁니다; 그것을 방지하기 위해, (헤더가 이미 .active 경우 선택기 어떤 요소와 일치하지 않으며, 아무것도 일어나지 않습니다)

$('#myHeader:not(.active)').click(); 

로 변경