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.
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
Post a Comment