Home/ Questions/Q 6756793
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T13:34:01+00:00

I’m trying to make a CSS & JS based dropdown-menu. This example works in

  • 0

I’m trying to make a CSS & JS based dropdown-menu.

This example works in all browsers:

http://jsfiddle.net/bqQqN/1/

However, I want to make sure the item loses focus and automatically closes after clicking on something else in the <body>. I’m trying to accomplish that with the following code:

http://jsfiddle.net/bqQqN/2/

Now, the .blur function does work in all the browsers, but there’s no other text inserted anymore and when I click twice on the element, it closes and opens again, instead of just closing.

I’m lost here. I want to keep the .blur function of course, but I want to make sure normal behavior can be kept.

Any help is much appreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To hide it again, bind a click listener to the document, then you can check if the thing you’ve clicked on is in your drop down and return false if it is, or hide if it’s not. Effectively that means if you click on anything other than a link in the drop down, it will hide it.

    var $dropdown = $(".dropdown > dd > ul"),
    $drop_link = $(".dropdown > dt > a");

$drop_link.click(function(e) {
    $dropdown.toggle();
    e.preventDefault();
});

// Bind the click to everything
$(document).mouseup(function(e) {
    // If the dropdown is visible
    // and the thing we've clicked is not a descendent of the dropdown
    if ($dropdown.is(":visible") && $(e.target).parents('.dropdown').length == 0) {
        $dropdown.hide();
    }
});

    I’ve also updated your jsFiddle

    • 0