Problems using JQuery Toggle -
Problems using JQuery Toggle -
can please help problem using jquery toggle? have tried can cannot work.
basically have menu 2 levels of sub menu. sub levels hidden, until main menu item clicked. problem when main menu item clicked, 1 level of menu shown - level 2 never shows up. have tried targetting these class name, , varous other methods, reject show expect them to. have js fiddle below , appreciate help.
many in advance help.
** update post. main menu items (class="mc") responsible toggling menu. sub menus links (which why target class="mc" on click). main menu items may not have level 2 items.
js fiddle: http://jsfiddle.net/dunce/wdcwewhq/25/embedded/result/
<script> $(function(){ // hide sub menu items on load. $("#lhsnav ul").hide(); $('.mc','#lhsnav').click(function(e){ e.preventdefault(); //prevent default action //show or hide sub menu items selected main menu item $(this).nextall().slidetoggle(); //$(this).next().slidetoggle() //$(this).find("ul").slidetoggle(); }); }); <script> <ul id="lhsnav"> <li><a id="mc1" href="#" class="mc">main menu item (click toggle sub menus)</a> <ul><li><a href="#" id="sc1" class="sc1">sub menu level 1</a> <ul><li><a href="#" id="sc2" class="sc2">-> sub menu level 2</a></li></ul> </li> </ul> </li> <li><a id="mc2" href="#" class="mc">main menu item (click toggle sub menus)</a> <ul><li><a href="#" id="sc3" class="sc1">sub menu level 1</a> <ul><li><a href="#" id="sc4" class="sc2">-> sub menu level 2</a></li></ul> </li> </ul> </li> </ul> <p> menu has 2 sub level categories - these hidden on load. </p> <p> when main menu item clicked, thought show of sub menu items (level 1 , level 2), belong main menu. problem sub menu level 1 items beingness shown. sub menu level 2 items never seen/toggled - why not? doing wrong? have tried alternative ways of targetting elements, nil works. </p>
you targetting element's class .mc
sub menu's don't have class. instead can target anchor elements within li
has ul
child
class="snippet-code-js lang-js prettyprint-override">// hide sub menu items on load. $("#lhsnav .mc + ul").hide(); $('a.mc', '#lhsnav').click(function(e) { e.preventdefault(); //prevent default action //show or hide sub menu items selected main menu item $(this).nextall().slidetoggle(); });
class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul id="lhsnav"> <li> <a id="mc1" href="#" class="mc">main menu item (click toggle sub menus)</a> <ul> <li> <a href="#" id="sc1" class="sc1">sub menu level 1</a> <ul> <li> <a href="#" id="sc2" class="sc2">-> sub menu level 2</a> </li> </ul> </li> </ul> </li> <li> <a id="mc2" href="#" class="mc">main menu item (click toggle sub menus)</a> <ul> <li> <a href="#" id="sc3" class="sc1">sub menu level 1</a> <ul> <li> <a href="#" id="sc4" class="sc2">-> sub menu level 2</a> </li> </ul> </li> </ul> </li> </ul> <p> menu has 2 sub level categories - these hidden on load. </p> <p> when main menu item clicked, thought show of sub menu items (level 1 , level 2), belong main menu. problem sub menu level 1 items beingness shown. sub menu level 2 items never seen/toggled - why not? doing wrong? have tried alternative ways of targetting elements, nil works. </p>
jquery toggle
Comments
Post a Comment