javascript - My .onclick function for a child list only display for a split second - Jquery -


i'd make list that's nested within list collapse on click, sub-menu department. real flashy like.

i'm using .click function having hid sub-menus, showing slight second. i'm super novice , began using jquery last week. here code:

jquery:

$(function(){     $("ul.sitback").hide();     });     $(function() {     $("li.dept").click(function(){     $("ul.sitback").toggle();      });      }); 

html:

<h3 align="center">departments</h3> <ul>     <a href><li class="dept1">+ take care products</li></a>             <ul id="area1" class="sitback">             <a href><li>men's products</li></a>             <a href><li>women's products</li></a>             </ul>     <a href><li class="dept">+ home electronics</li></a>             <ul id="area" class="sitback">             <a href><li>televisions</li></a>             <a href><li>audio</li></a>             <a href><li>portable</li></a>             </ul>     <a href><li class="dept">+ computers , video games</li></a>             <ul  id="area" class="sitback">             <a href><li>video games</li></a>             <a href><li>home computers</li></a>             </ul>     <a href><li class="dept" data-department="dept4">+ books</li></a>             <ul  id="area" class="sitback">             <a href><li>fiction</li></a>             <a href><li>non-fiction</li></a>             <a href><li>biography</li></a>             </ul>     <a href><li class="dept">+ music</li></a>             <ul  id="area" class="sitback">             <a href><li>digital download</li></a>             <a href><li>cds</li></a>             </ul>     <a href><li class="dept">+ experience days</li></a>             <ul  id="area" class="sitback">             <a href><li>hot airballoon ride</li></a>             <a href><li>track days</li></a>             </ul> </ul> </div> 

here's example of how achieve using css.

fiddle here

html:

<ul>     <li>item         <ul>             <li>subitem</li>             <li>subitem</li>             <li>subitem</li>             <li>subitem</li>         </ul>     </li> </ul> 

css:

li ul { display:none; } li:hover ul { display:block; } 

you hide sub lists default. , set them display when parent list item hovered over. can make "flashier" adding more css. transitions. might flash you're looking for.


Comments

Popular posts from this blog

mysql - FireDac error 314 - but DLLs are in program directory -

git - How to list all releases of public repository with GitHub API V3 -

c++ - Getting C2512 "no default constructor" for `ClassA` error on the first parentheses of constructor for `ClassB`? -