CODEWITHSUNDEEP
javascriptjqueryhtmlcssdrop-down-menu
user1694077
user1694077

Reputation:

Dropdown that hides on click outside of the menu

I've got a simple dropdown script and I want it to hide all open dropdowns on a click outside of the menu. But it does not seem to work, does anyone know why?

You can find it here: http://codepen.io/dr-potato/pen/rLleC?editors=101

HTML

<ul>
  <li><a href="#">Home</a></li>
  <li class="Navigation-listItem is-dropdown">
    <a href="#">About</a>
    <ul class="Navigation-list is-dropdown is-hidden">
        <li>Johnny</li>
        <li>Julie</li>
        <li>Jamie</li>
    </ul>
  </li>
  <li class="Navigation-listItem is-dropdown">
    <a href="#">Contact</a>
    <ul class="Navigation-list is-dropdown is-hidden">
        <li>Johnny</li>
        <li>Julie</li>
        <li>Jamie</li>
    </ul>
  </li>
</ul>

CSS

.Navigation-list {
    display: block;
}

.Navigation-list.is-hidden {
    display: none;
}

JS

$(document).ready(function() {
    $('.Navigation-listItem').click(function() {
      $(this).children('.Navigation-list.is-dropdown').toggleClass('is-hidden');
    });
});

/* Anything that gets to the document
   will hide the dropdown */
$(document).click(function(){
  $(".Navigation-listItem.is-dropdown").addClass('is-hidden');
});

/* Clicks within the dropdown won't make
   it past the dropdown itself */
$(".Navigation-listItem.is-dropdown").click(function(e){
  e.stopPropagation();
});

Upvotes: 0

Views: 5849

Answers (3)

Bhavik
Bhavik

Reputation: 4904

Working Fiddle

jQuery Code

$(document).ready(function () {
    $('.Navigation-listItem').click(function () {
        $(this).children('.Navigation-list.is-dropdown').toggleClass('is-hidden');
    });


    /* Anything that gets to the document
   will hide the dropdown */
    $(document).on('click', function (event) {
        if ($(event.target).closest('#menu').length == false) {
            $(".Navigation-list.is-dropdown").addClass('is-hidden');
        }
    });

    /* Clicks within the dropdown won't make
   it past the dropdown itself */
    $(".Navigation-listItem.is-dropdown ").click(function (e) {
        e.stopPropagation();
    });
});

With help from this answer

Upvotes: 1

qaztype
qaztype

Reputation: 73

With the info you gave and the codepen I can't see it working, but I suppose that $(document).click(function() to hide won't work because the drop down is inside the document so when you click it, it'll disappear. I recommend you to see this post How to hide/show drop down list content in HTML.

Upvotes: 0

Miss Komal
Miss Komal

Reputation: 1

You can change the display property of your dropdown in this manner. This is just a rough code.

                       if(dropDownShow.css('display') != 'block'){
                            dropDownShow.css('display', 'block');
                            dropDownShow.css('position', 'absolute');

                        }
                        else{
                            dropDownShow.css('display', 'none');
                        }

Upvotes: 0

Related Questions