Mischen von JQuery toggle() mit #anchors

Question

Hey, ich habe das folgende Dilemma: Ich habe eine Reihe von DIVs mit Kind DIVS in ihnen, die standardmäßig ausgeblendet sind. Am Anfang benutzte ich Javascript und Onclick mit Ankern, um sowohl einen Toggle- als auch einen 'Move-to-Anchor'-Effekt zu erzielen. Jetzt, wo ich zur JQuery-Alternative gewechselt bin, habe ich Probleme, den gleichen 'Move-to-Anchor'-Effekt zu reproduzieren. Das Umschalten funktioniert gut.

Wenn Sie Link in der übergeordneten div ein „a h2“ klicken, wird das Kind div durch Knebel gezeigt. Hier ist ein Beispiel von einem Elternteil und Kind div Setup:

<div class="full email"> 
<a id="test_anchor"></a> 
    <h2 class="subsubtitle"><a href="#test_anchor">TITLE AND LINK</a></h2> 
    <div class="description full"> 
    <p>THIS IS WHAT SHOWS ALL THE TIME, REGARLDESS OF THE TOGGLE</p> 
    </div><!-- #description ends here --> 

    <div id="c_1"> 
    THE DIV AND THE CONTENTS THAT ARE SHOWN AND HIDDEN 
    </div><!-- #c_1 div ends here --> 

</div><!-- .full .email ends here --> 

// Und hier ist der JQuery:

$(document).ready(function(){ 

$("#c_1,#c_2,#c_3,#c_4").hide(); 

$("div div h2 a").toggle(
    function() { $(this).parent().siblings("div:last").slideDown("slow") }, 
    function() { $(this).parent().siblings("div:last").hide() } 

    ); 

}); 

Nun ist die Frage: Wie kann ich aktivieren oder dass #anchor reaktivieren, so dass sowohl die Jquery slideDown/hide Funktionen und der alte Goold 'Move-to-Anchor' kommt ins Spiel?

Mit freundlichen Grüßen G.Campos

Answer 1

Was Sie mit der Toggle-Funktion tun wird die Sichtbarkeit der angepassten Elemente Makeln, nicht das, was in ihnen ist.

versuchen, etwas wie folgt aus:

$(function(){ 
    $("#c_1,#c_2,#c_3,#c_4").hide(); // good practice to hide in JS instead of CSS file :) 

    // Assign toggle functionality. 
    $("h2.subsubtitle a").click(function(){ 
    var jDiv = $(this).parent().siblings("div:last"); 

    if(jDiv.is(":visible")){ 
     jDiv.hide("slow"); // you're toggling this div, not the anchor. 
    } else { 
     jDiv.show("slow"); 
    } 

    return true; // if switched to false, anchor won't link to anything. 
    }); 
}); 

Answer 2

Versuchten Sie something like this zu erreichen?

Relevante jQuery-Code

$(function(){ 

    $("#c_1").hide(); 

    $("h2.subsubtitle a").toggle(
    function() { $(this).parent().siblings("div:last").slideDown("slow"); return false;}, 
    function() { $(this).parent().siblings("div:last").slideUp("slow"); return false; }      
    ); 

}); 

EDIT:

Als Antwort auf deinen Kommentar, ich habe auf this example eine Anzahl der Ein-/Ausblenden Abschnitte setzen und alles scheint gut für mich zu arbeiten in IE6 und Firefox 3. Sie können den Code dafür bearbeiten, indem Sie /edit auf die URL hinzufügen. Funktioniert dieses Beispiel für Sie und welchen Browser benutzen Sie?