javascript - Hiding list in hidden list -
i want hide every parents ul's span class "ul-menu"
, code write hide first unhidden ul.
i want hide every single menu ul parent of span on page load, hide ul number 1 check , if remove "ul-menu"
span ul number 1 , ul number 2 hide, want hide every thats ul. try each function not help. or can hide ul in hidden ul level upper or ?
$('.ul-menu').on("click", function() { var t = $(this); t.parent().find('ul').toggle(); if (t.hasclass('glyphicon-chevron-down')) { t.removeclass('glyphicon-chevron-down'); t.addclass('glyphicon-chevron-right'); } else { t.addclass('glyphicon-chevron-down'); t.removeclass('glyphicon-chevron-right'); } }); //hiding function $(document).ready(function() { $('.ul-menu').parent().find('ul').hide(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="my-menu well" id="pages"> <header>sites</header> <ul id="starter"> <li> <span class="glyphicon glyphicon-record"></span> <a href="?page=pages/about">about</a> </li> <li> <span class="glyphicon ul-menu glyphicon-chevron-down"></span> <a href="?page=pages/courses">courses</a> <ul> <!-- ul hide number 1 --> <li> <span class="glyphicon ul-menu glyphicon-chevron-down"></span> <a href="?page=pages/courses/topic_1">topic 1</a> <ul> <!-- ul hide number 2 --> <li> <span class="glyphicon glyphicon-record"></span> <a href="?page=pages/courses/topic_1/sub_topic_1">sub topic 1</a> </li> </ul> </li> <li> <span class="glyphicon glyphicon-record"></span> <a href="?page=pages/courses/topic_2">topic 2</a> </li> </ul> </li> <li> <span class="glyphicon glyphicon-record"></span> <a href="?page=pages/main">main</a> </li> </ul> </div> <!-- menu-->
you should target sibling ul
element
$('.ul-menu').on("click", function () { var t = $(this); t.nextall('ul').toggle(); t.toggleclass('glyphicon-chevron-down glyphicon-chevron-right') });
demo: fiddle
Comments
Post a Comment