php - How Do I set drop down menu list open when I click on parent li Then open the sub li using javascript? -
this code post image, html , css code.. 1 tell me how set drop down menu list when click on parent <li>then open sub <li> using javascript?
in image see of code.
<script> $(".menu li a").click(function(){ $(this).next("ul").toggle(); }); $("#menu1 li a").click(function(){ $(this).next("ul").toggle(); }); $("#menu2 li a").click(function(){ $(this).next("ul").toggle(); }); </script>#leftcolsearch { float: left; width: 210px; margin: 0 7px 10px 0; } #leftcolsearch .option { float: left; width: 196px; border: #cccccc dotted 1px; border-top: none; padding: 1px 0 10px 10px; } .menu { margin: 0; padding: 0 0 0 2px; } .menu li {list-style: none; float:left; width:185px; margin:0;} .menu li ul{ margin:0; padding:0; margin-left:8px; display:none; } .menu li ul li{ margin:4px 0; padding: 0; line-height: 100%; display: inline; } .menu li a.active,.menu li a:hover{ color: #539dbc; background: url(../images/checkboxwc.png) no-repeat left top; display:block; padding: 0 0 0 15px; } .menu { color: #999; background: url(../images/checkbox.png) no-repeat left top; padding: 0 0 0 15px; text-decoration: none; outline: none; }<div id="leftcolsearch"> <div class="option"> <h4 style="margin-left:7">date:</h4> <ul class="menu" id="menu1"> <li><a href="">2013</a> <ul> <li><a href="">november</a></li> <li><a href="">december</a></li> </ul> </li> <li><a href="">2014</a> <ul> <li><a href="">january</a></li> <li><a href="">february</a></li> <li><a href="">march</a></li> <li><a href="">april</a></li> <li><a href="">may</a></li> <li><a href="">june</a></li> <li><a href="">july</a></li> <li><a href="">august</a></li> <li><a href="">september</a></li> <li><a href="">october</a></li> <li><a href="">november</a></li> <li><a href="">december</a></li> </ul> </li> </ul> </div> <div class="option"> <h4>location</h4> <ul class="menu" id="menu2"> <li><a href="">africa</a> <ul> <li><a href="">algeria</a></li> <li><a href=""> angola</a></li> <li><a href=""> cameroon</a></li> <li><a href=""> egypt</a></li> <li><a href=""> kenya</a></li> <li><a href=""> madagascar</a></li> <li><a href=""> morocco</a></li> <li><a href=""> mozambique</a></li> <li><a href=""> nigeria</a></li> <li><a href=""> south africa</a></li> <li><a href=""> tanzania, united republic of</a></li> </ul> </li> <li> <a href="">asia</a> <ul> <li><a href="">bahrain</a></li> <li><a href=""> bangladesh</a></li> <li><a href=""> canada</a></li> <li><a href=""> china</a></li> <li><a href=""> france</a></li> <li><a href=""> hong kong</a></li> <li><a href=""> india</a></li> <li><a href=""> indonesia</a></li> <li><a href=""> iran, islamic republic of</a></li> <li><a href=""> israel</a></li> <li><a href=""> japan</a></li> <li><a href=""> jordan</a></li> <li><a href=""> kazakhstan</a></li> <li><a href=""> korea, republic of</a></li> <li><a href=""> lebanon</a></li> <li><a href=""> macao</a></li> <li><a href=""> malaysia</a></li> <li><a href=""> oman</a></li> <li><a href=""> pakistan</a></li> <li><a href=""> philippines</a></li> <li><a href=""> qatar</a></li> <li><a href=""> saudi arabia</a></li> <li><a href=""> singapore</a></li> <li><a href=""> sri lanka</a></li> <li><a href=""> taiwan, province of china</a></li> <li><a href=""> thailand</a></li> <li><a href=""> turkey</a></li> <li><a href=""> united arab emirates</a></li> <li><a href=""> vietnam</a></li> </ul> </li> <li><a href=""> australia</a> <ul> <li><a href="">australia</a></li> <li><a href=""> fiji</a></li> <li><a href=""> new zealand</a></li> </ul> </li> <li> <a href="">europe</a> <ul> <li><a href="">austria</a></li> <li><a href=""> belgium</a></li> <li><a href=""> bulgaria</a></li> <li><a href=""> croatia</a></li> <li><a href=""> czech republic</a></li> <li><a href=""> denmark</a></li> <li><a href=""> estonia</a></li> <li><a href=""> finland</a></li> <li><a href=""> france</a></li> <li><a href=""> germany</a></li> <li><a href=""> greece</a></li> <li><a href=""> hungary</a></li> <li><a href=""> ireland</a></li> <li><a href=""> italy</a></li> <li><a href=""> lithuania</a></li> <li><a href=""> monaco</a></li> <li><a href=""> netherlands</a></li> <li><a href=""> norway</a></li> <li><a href=""> poland</a></li> <li><a href=""> portugal</a></li> <li><a href=""> romania</a></li> <li><a href=""> russian federation</a></li> <li><a href=""> serbia</a></li> <li><a href=""> slovakia</a></li> <li><a href=""> slovenia</a></li> <li><a href=""> spain</a></li> <li><a href=""> sweden</a></li> <li><a href=""> switzerland</a></li> <li><a href=""> turkey</a></li> <li><a href=""> ukraine</a></li> <li><a href=""> united kingdom</a></li> </ul> </li> <li> <a href="">north america</a> <ul> <li><a href="">canada costa rica</a></li> <li><a href=""> cuba</a></li> <li><a href=""> mexico</a></li> <li><a href=""> united states</a></li> </ul> </li> <li> <a href="">south america</a> <ul> <li><a href="">argentina</a></li> <li><a href=""> brazil</a></li> <li><a href=""> chile</a></li> <li><a href=""> colombia</a></li> <li><a href=""> mexico</a></li> <li><a href=""> peru</a></li> <li><a href=""> uruguay</a></li> </ul> </li> </ul> </div> </div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> $("#menu li").click(function(){ $(this).next("ul").toggle(); }); for class
$(".menu li").click(function(){ $(this).next("ul").toggle(); }); 
Comments
Post a Comment