Mixing JQuery die toggle() mit #Anker

Hey, ich habe Folgendes dilemma:
Ich habe eine Reihe von DIVs mit Kind DIVS in Ihnen, die standardmäßig ausgeblendet sind. Zunächst war ich mit javascript und onclick mit Ankern zu erzielen, die sowohl ein Umschalten und "move-to-Anker" - Effekt. Nun, die habe ich verschoben, um die JQuery alternative, ich bin mit Problemen der Reproduktion die gleichen "move-to-Anker" - Effekt. Das Umschalten funktioniert Prima.

Wenn Sie auf ein "h2" link im übergeordneten div, die Kind-div ist, wird durch Umschalten. Hier ist ein Beispiel einer parent-und child-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 folgt 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 die aktivieren bzw. zu reaktivieren, die # - Anker, so dass SOWOHL die Jquery slideDown - /ausblenden Funktionen und die goold old "verschieben-zum-Anker" ins Spiel kommen?

Freundlichen GRÜßEN
G. Campos

InformationsquelleAutor | 2009-03-16
  1. 1

    Was du tust mit der toggle-Funktion ist das Umschalten der Sichtbarkeit der übereinstimmenden Elemente, nicht was in Ihnen vorgeht.

    Probieren Sie etwas wie dieses:

    $(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.
  });
});
    • Es gibt einen zusätzlichen trick, den Sie verwenden können, um zu verhindern, dass das blinken der Elemente, die ausgeblendet sind, auf dem Dokument.jetzt auch fertig. Werfen Sie einen Blick hier - learningjquery.com/2008/10/...
    • Das ist ein toller trick, danke fürs teilen! 🙂
    • Naja, das problem ist jetzt, dass der code oben hat den Anker funktioniert und das Umschalten selbst - aber nur, wenn man vom HIDDEN GEZEIGT. Sobald es offen ist, kann nicht wieder geschlossen werden. Wird neu in Jquery ich bin mir nicht sicher, wie ich werfen Sie in den hide() für die Lösung zur Verfügung gestellt, so dass Umschalten funktioniert komplett.
    • toggle bedeutet genau, dass, wenn das Objekt zeigt, dann verstecken Sie es, wenn es verborgen ist, dann zeigen Sie es. Sie könnten versuchen, zu überprüfen .is(":visible"). Update jetzt mit, dass.
    • Ja, ich war beim Lesen durch den JQuery docs-Seite und nach dem Beispiel, das ein - /ausblenden-Eigenschaft Umschalten automatisch funktionieren sollte. Ich habe versucht, Ihre aktualisierte Lösung und das gleiche Ergebnis statt. Divs sind geöffnet, aber nicht geschlossen. Vielleicht hat das etwas zu tun mit der Anker selbst.
    InformationsquelleAutor Seb
  2. 0

    Waren, die Sie versuchen zu erreichen so etwas wie dieses?

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

    In Antwort auf Ihren Kommentar, ich habe eine Nummer von der Karte ein - /ausblenden von Abschnitten auf dieses Beispiel und alles scheint zu funktionieren gut für mich im IE6 und Firefox 3. Sie können den code Bearbeiten, der für ihn durch hinzufügen /edit auf die URL. Zeigt dieses Beispiel funktioniert ok für dich ist und welchen browser verwenden Sie?

    • Dank Russ. Ja, die url-Probe, die Sie zur Verfügung gestellt hat, die Wirkung im der Suche nach. Anzeigen/ausblenden der Knebel. Jedoch in meiner Seite, dass viele dieser übergeordneten divs und Ihre jeweiligen untergeordneten div, scheint es ein Fehler von einigen Sortieren. Ich habe versucht mit dem code: wenn das Kind div geöffnet wird, wird es nicht in der Nähe.
    InformationsquelleAutor Russ Cam
Schreibe einen Kommentar