ul li click

by Nikhil krishnan

HTML

<ul>
  <li class="expand-menu">
    <span class="dd-menu">menu item 01</span>
    <ul>
      <li>first menu</li>
      <li>second menu</li>
      <li>third menu</li>
    </ul>
  </li>
  <li class="expand-menu">
    <span class="dd-menu">menu item 02</span>
    <ul>
      <li>first menu</li>
      <li>second menu</li>
      <li>third menu</li>
    </ul>
  </li>
</ul>

CSS

.expand-menu ul{
  display: none;
}

JavaScript

$(".expand-menu .dd-menu").click(function (e) {  
        $(this).parent().toggleClass('open');
        if($(this).parent().hasClass('open')){
            $(".expand-menu").find('ul').not(this).closest('ul').slideUp(); 
            $(".expand-menu").not(this).removeClass('open');
            if($(this).parent().find('ul').is(':visible')){
            	$(this).parent().find('ul').show();  
            }else{
            	$(this).parent().find('ul').slideDown();  
            } 
        }
    });