Schalten Sie auf welches Element geklickt werden

Question

Ich benutze den Toggle () mit JQuery und habe eine Seitenleiste auf meiner Seite und jeder Header ist

<h2 class="sidebar-header">

Ein Abschnitt meines Codes sieht aus wie:

    <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&amp;title=Ryan Coughlin - Web/Graphic Design and Development" target="_blank" title="Add to delicious!">delicious!</a> </p>
    </div>

Sie sind jeweils in diese Divelelemente eingewickelt. Ich versuche es zu schaffen, wenn Sie auf den Header klicken, es wird den Inhalt verkleinern. Ich weiß, dass Toggle das kann, aber wenn ich es für jeden "Sidebar-Header" mache, klicken Sie auf ein Element auf der Seite und es wird sie alle verbergen. Wie kann ich das tun?

Answer 1

Versuche dies:Weiter

    $(".sidebar-header").click(function() {
        $(this).nextAll().toggle();
    });

Answer 2

Probieren Sie so etwas aus:

Angenommen, Sie haben den folgenden Code:

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

Sagen Sie nun, wenn Sie auf einen Header klicken möchten, wird der Inhalt dieses Headers angezeigt / versteckt:

$(".header").click(function () {
    $(this).parent(".topdiv:first").find(".somecontent").toggle();
});

Auf diese Weise wird nur der Inhalt des jeweiligen Headers umgeschaltet und nicht der Rest.

Jetzt können Sie den Code analysieren, den ich für Sie geschrieben habe, und ihn in Ihrem eigenen Kontext anwenden.