Daniels Jirgensons Daniels Jirgensons - 1 month ago 27
CSS Question

When click anywhere on page, dropdown hide

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;
});

Answer

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()
})