CODEWITHSUNDEEP
jquery
pixelite
pixelite

Reputation: 57

Jquery drop-down menu; all open on click

I am trying to create a drop down using jquery; however when I click on any of the menu with drop down; all the drop-down open. Here is my code: 

    $('.has-dropdown').on('click', function() {
        if(!$('.nav-dropdown').is(':visible')){
            $(".nav-dropdown" ).slideDown();
            var $this = $(this);
            $this.toggleClass('is-active').children('ul').toggleClass('is-visible');
        } else {
            $(".nav-dropdown" ).slideUp();
            var $this = $(this);
            $this.toggleClass('is-active').children('ul').toggleClass('is-visible');
        }
    });

HTML Code:

    <ul class="nav-menu menu">
                      <li class="menu-item has-dropdown">
                            <a href="#!" class="menu-link dropdown">Home Pages</a>
                                <ul class="nav-dropdown">
                                     <li class="menu-item"> <a href="index.html" class="menu-link">Home v1</a> </li>
                                     <li class="menu-item"> <a href="index_2.html" class="menu-link">Home v2</a></li>
                                </ul>
                      </li>
                      <li class="menu-item has-dropdown">
                            <a href="#!" class="menu-link">Product Page</a>
                                <ul class="nav-dropdown">
                                     <li class="menu-item"> <a href="product.html" class="menu-link">Product List v1</a> </li>
                                     <li class="menu-item"> <a href="index_2.html" class="menu-link">Product List v2</a></li>
                                </ul>
                      </li>
                      <li class="menu-item"> <a href="#!" class="menu-link">Contact</a> </li>
                      <li class="menu-item"> <a href="#!" class="menu-link">About</a> </li>
             </ul>

Upvotes: 1

Views: 2192

Answers (1)

Milind Anantwar
Milind Anantwar

Reputation: 82241

That is because you are targeting .nav-dropdown elements. you need to only find the element in current li:

  $(this).closest('li').find('.nav-dropdown').slideDown();

Complete Code:

$('.has-dropdown').on('click', function() {
    var currentnav=$(this).closest('li').find('.nav-dropdown');
    if(!currentnav.is(':visible')){
        currentnav.slideDown();
        var $this = $(this);
        $this.toggleClass('is-active').children('ul').toggleClass('is-visible');
    } else {
        currentnav.slideUp();
        var $this = $(this);
        $this.toggleClass('is-active').children('ul').toggleClass('is-visible');
    }
});

Upvotes: 3

Related Questions