문제
jQuery와 함께 토글 ()을 사용하고 있으며 페이지에 사이드 바가 있고 각 헤더는 다음과 같습니다.
<h2 class="sidebar-header">
내 코드의 한 섹션은 다음과 같습니다.
<div class="sidebar-section">
<h2 class="sidebar-header">SUBSCRIBE</h2>
<p class="sidebar">Make sure you subscribe to stay in touch with the latest articles and tutorials. Click on one of the images below:</p>
<div class="rss-icons">
<a href="http://fusion.google.com/add?feedurl=http://feeds.feedburner.com/ryancoughlin"><img src="http://gmodules.com/ig/images/plus_google.gif" width="62" height="17" alt="Add to Google Reader or Homepage" class="feed-image"/></a>
<a href="http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/ryancoughlin" title="Web/Graphic Design/Development by Ryan Coughlin"><img src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo3.gif" alt="Add feed to My Yahoo" width="62" height="17" class="feed-image" /></a>
<a href="http://www.newsgator.com/ngs/subscriber/subext.aspx?url=http://feeds.feedburner.com/ryancoughlin" title="Web/Graphic Design/Development by Ryan Coughlin"><img src="http://www.newsgator.com/images/ngsub1.gif" alt="Subscribe in NewsGator Online" class="feed-image" height="17" /></a>
</div>
<hr />
<p class="sidebar feed">Don't have those? Grab the <a href="http://feeds.feedburner.com/ryancoughlin" target="_blank" title="Subscribe to this feed">RSS</a> url.</p>
<p class="sidebar delicious">Make sure you add me to <a href="http://del.icio.us/post?url=http://www.ryancoughlin.com&title=Ryan Coughlin - Web/Graphic Design and Development" target="_blank" title="Add to delicious!">delicious!</a> </p>
</div>
그것들은 각각 그 div 요소에 싸여 있습니다. 헤더를 클릭하면 콘텐츠가 축소됩니다. 토글이 그렇게 할 수 있다는 것을 알고 있지만, 각 "사이드 바 헤더"에 대해 만들면 페이지에서 하나의 요소를 클릭하면 모두 숨길 수 있습니다. 어떻게해야합니까?
해결책
이 시도:다음에서
$(".sidebar-header").click(function() {
$(this).nextAll().toggle();
});
다른 팁
다음과 같은 것을 시도하십시오.
다음 코드가 있다고 가정합니다.
<div class="topdiv">
<h2 class="header">Header 1</h2>
<div class="somecontent">
This is the content
</div>
</div>
<div class="topdiv">
<h2 class="header">Header 2</h2>
<div class="somecontent">
This is the content
</div>
</div>
이제 헤더를 클릭하려면 해당 헤더의 내용이 표시 / 숨겨져 있다고 말합니다.
$(".header").click(function () {
$(this).parent(".topdiv:first").find(".somecontent").toggle();
});
이런 식으로, 특정 헤더의 내용 만 나머지가 아닌 토글링됩니다.
이제 내가 작성한 코드를 분석하여 자신의 상황에 적용 할 수 있습니다.
제휴하지 않습니다 StackOverflow