jQuery: how do I make a collapsable tree nav? -


I have a header, and each header contains sub items when I click on a header, I want to toggle content to see or show:

This is far from me: 

  $ j ('h2') .click (function () {if ($ J (this) .next (). (": Hidden") {$ j (this) .next (). Show ();} else {$ j (this) .next (). Hide (); }});

And my HTML looks like this: 

  & lt; Ul class = "submenu" & gt; & Lt; Li class = "section" & gt; & Lt; H2 & gt; One section & lt; / H2 & gt; & Lt; Ul & gt; & Lt; Li & gt; Text & lt; / Li & gt; & Lt; Li & gt; Text & lt; / Li & gt; & Lt; Li & gt; Text & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li class = "section" & gt; & Lt; H2 & gt; Section Two & lt; / H2 & gt; & Lt; UL style = "display: none; overflow-x: visible; overflow-y: visible;" & Gt; & Lt; Li style = "" & gt; Text & lt; / Li & gt; & Lt; Li & gt; Text & lt; / Li & gt; & Lt; Li & gt; Text & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt;

The way you can do it, or by using the slide effect , Like this: 

  $ ('h2'). Click (function () {$ (this) .next (). Stop (true, true) .slideToggle ();});   
  
 Or instant slide effect (without):  
  $ ('h2'). Click (function () {$ (This) .next (). Toggle ();}); Using  
 
 or a slide + fade effect (), like this: 
 
  $ ('H2'). Click (function () {$ (this) .next (). Stop (true, true) toggle ("sharp");});  
 
 In each case there is a call to stop the action queue build-up. This code is for most users where  $ == jQuery  appears, though you are using only  $  to  $ j  Change is the current code with.

Comments

Post a Comment