Ich versuche, einige Divs auf bestimmten Link zu zeigen klicken

Question

Meine Aufgabe für diesen Abend ist es, ein div (schließlich zwei divs oder mehr tatsächlich) zu zeigen und zu verbergen, wenn ein Link von der Hauptnavigation geklickt wird. Dadurch werden divs ausgeblendet, wenn sie auf einen anderen Teil der Hauptnavigation klicken.

DONE

Vielen Dank an alle especially..Matchu gehen ....

der Code nun wie unten ist und funktioniert ....

<script type="text/javascript"> 
$(document).ready(function(){ 
     $("#tagcloud").hide(); 
      blogLink = $("ul.mainnav li.blog a").click(function() {  
      $("#tagcloud").show();});$("ul.mainnav li a").not  (blogLink).click(function() {  
      $("#tagcloud").hide();});  

      }); 
</script> 

Wenn jemand sehen mögliche Probleme mit diesem, verwenden Sie es unter www.alwaystwisted.com/index.html lassen Sie es mich wissen ....

Auch haben Sie gerade JQuery bestellt 1.3 Buch .... so bekommen hoffentlich meinen Kopf um es ein wenig oder viel besser ....

Grüße

Sty

Answer 1

ein drittes Mal für den neuesten Upload aktualisiert!

Herumspielen mit der Seite, die Sie mir gegeben haben, hier ist was ich mit der Arbeit in der Firebug-Konsole machen konnte, bevor Sie tagcloud zu einer Klasse geschaltet:

blogLink = $("ul.mainnav li.blog a").click(function() { 
    $("#tagcloud").show(); 
}); 
$("ul.mainnav li a").not(blogLink).click(function() { 
    $("#tagcloud").hide(); 
}); 

Geben Sie diesem einen Versuch :)

Und darüber "benutze Klasse nicht ID-Sache", das war bevor ich gesehen habe, was du eigentlich versucht hast zu tun. Sie sollte ID verwenden, wenn es nur eine Instanz gibt - Entschuldigung für die Verwirrung!

Answer 2

Ich bin mir nicht sicher, ob ich Ihr Ziel verstehe, ohne auch nur ein wenig HTML zu sehen, aber nur ein paar Dinge, die Sie zuerst überprüfen könnten.

• $ ('ul.mainnav) ... Sie müssen die Zeichenfolge bis
• $ (this) .next ("# tagcloud") schließen ... Sie einfach $ verwenden können ("# tagcloud ") da sollten Sie eindeutige IDs auf der Seite haben.

Wenn Sie etwas mehr Code, der Menschen helfen könnte.

Answer 3

Neben den bereits in diesem Thread erwähnten Syntaxfehlern müssen Sie wahrscheinlich false zurückgeben; Klicken Sie auf diese Link-Klicks, sonst wird Ihre Aktion ausgeführt, und der Link wird immer noch zu einem anderen Ort weitergeleitet.

Natürlich öffnet dies die Tür zum Accessibility-Argument. Ich würde eher eine funktionierende Demo bekommen, bevor ich mir über diesen Aspekt Gedanken mache.

Answer 4

Ich werde es versuchen: Ihre click Handler auf li.blogcontent sprudelt bis ul.mainnav und führt auch seine click Handler.

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('li.blogcontent').click(function(e) { 
     e.stopPropagation(); // Stop the bubbling up to its parent 
     $("#tagcloud").show(); 
    }); 
    $('ul.mainnav').click(function() { 
     $("#tagcloud").hide(); 
    });        
}); 
</script> 

oder Ereignis Delegation mit und sprudelnden (was ich nicht getestet, sollte aber in der Nähe sein):

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('ul.mainnav').click(function(e) { 
     var target = $(e.target); 
     if(target.hasClass('blogcontent')){ 
      $("#tagcloud").show(); 
     } 
     else{ 
      $("#tagcloud").hide(); 
     } 
    });        
}); 
</script> 

Answer 5

Das Ereignis aus dem li-Elemente an den ul Behälter wahrscheinlich das Problem ist, sprudelt . Ich bin mit jQuery ein wenig nicht vertraut, aber wenn es gerade DOM-Ereignisse weitergibt, ohne es zu modifizieren (was ich bezweifle, da der Autor von jQuery eher dagegen ist, existierende Objekte zu modifizieren), würde ich vorschlagen, nur preventDefault() zu verwenden nicht unterstützt von alle Browser. Sollte eine Methode in Ihrem Toolbelt haben, um Ereignisse zu stoppen und Blasenbildung zu verhindern, z.

function stopEvent(event){ 
    event.preventDefault(); 
    event.stopPropagation(); 
    event.stopped = true; 
}