Im searched a lot about my problem, but didnt find any solution. I know, Im new in JavaScript/JQuery, but maybe some one can help me :) I made this nice dropdown, what was working just, how I need, but there is the last bug. When I click anywhere on page, it doesn't hide. There's my JSFiddle

Any solutions there?

There's my JavaScript/JQuery

var $dropdown = $('.dropdown-content');

$(".dropdown-label").click(function(e){
    var $drop = $(this).toggleClass('dropdown--active').find(".dropdown-content").stop(true).toggle(100);
    $dropdown.not($drop).stop(true).hide(100);
    return false; 
});

Im searched a lot about my problem, but didnt find any solution. I know, Im new in JavaScript/JQuery, but maybe some one can help me :) I made this nice dropdown, what was working just, how I need, but there is the last bug. When I click anywhere on page, it doesn't hide. There's my JSFiddle

Any solutions there?

There's my JavaScript/JQuery

var $dropdown = $('.dropdown-content');

$(".dropdown-label").click(function(e){
    var $drop = $(this).toggleClass('dropdown--active').find(".dropdown-content").stop(true).toggle(100);
    $dropdown.not($drop).stop(true).hide(100);
    return false; 
});

• javascript
• jquery
• html
• css

3 Answers 3

In the code below I added only the document click binding.

var $dropdown = $('.dropdown-content');

$(".dropdown-label").click(function(e){
    var $drop = $(this).toggleClass('dropdown--active').find(".dropdown-content").stop(true).toggle(100);
    $dropdown.not($drop).stop(true).hide(100);
    return false; 
});

$(document).on("click", function() {
    $(".dropdown-content").hide()
})

updated fiddle click with document .It will hide the .dropdown-content .And apply e.preventDefault() they prevent from other click

$(document).click(function(e){
$(".dropdown-content").hide();
e.preventDefault();
})

Here is the html

 <div class="dropdown-content" style="width: 200px;height: 200px;border:1px solid #ccc;"></div>

In your script file

  $(document).on("click","body",function(e) { 
        if(!$(e.target).hasClass("dropdown-content")) { 
          $(".dropdown-content").hide(); 
        }
  });

Here is the fiddle https://jsfiddle/ej4t2c5u/