CODEWITHSUNDEEP
javascriptjqueryhtmlcssdrop-down-menu
Giant
Giant

Reputation: 1649

close dropdown menu with js on onclick event

i had asked a question on closing dropdown with pure css here and some said it is not possible to i had to find other way i read on js and im currently doing the coding with js now but i had one problem with the code it is not behaving properly it show all the dropdown and destroyed the submenu as well..any tutorial on this is appreciated or any suggestion here is the fiddle i made for this problem here

this is the js

$(function () {
      $('.click-nav > ul').toggleClass('no-js js');
      $('.click-nav .js ul').hide();
      $('.click-nav .js').click(function(e) {
        $('.click-nav .js ul').slideToggle(200);
        $('.clicker').toggleClass('active');
        e.stopPropagation();
      });
      $(document).click(function() {
        if ($('.click-nav .js ul').is(':visible')) {
          $('.click-nav .js ul', this).slideUp();
          $('.clicker').removeClass('active');
        }
      });
    });

Upvotes: 1

Views: 1357

Answers (1)

Husen
Husen

Reputation: 935

Updated Fiddle

You have to add some function like following:

    $(function () {
  $('.click-nav .no-js .have-second-level-menu').click(function(e) {
     $(this).closest('li').find('.sub-menu').slideToggle(200);
    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });

  $('.have-third-level-menu').click(function(e) {
      $(this).closest('li').find('ul').slideToggle(200);
    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });
});

And Html will be like following:

<div id="headermenu" class="click-nav">
<ul class="no-js">
    <li id=""><a href="#">menu1</a></li>
    <li id=""><a class="have-second-level-menu" href="#">menu2</a>
        <ul class="sub-menu">
            <li ><a class="have-third-level-menu" href="#">submenu1</a>
                <ul>
                    <li><a href="#">submenu.1</a></li>
                    <li><a href="#">submenu.2</a></li>
                    <li><a href="#">submenu.3</a></li>
                    <li><a href="#">submenu.4</a></li>
                </ul>
            </li>
            <li><a href="#">submenu4</a></li>
            <li><a href="#">submenu5</a></li>
            <li><a href="#">submenu7</a></li>
        </ul>
    </li>           
</ul>   
</div>

Upvotes: 1

Related Questions