Hide dropdown menu when clicked - Bootstrap

Question

I have a navigation bar in my website and all the links are loading a content in a container through AJAX.

Now, I need to hide the dropdown menu when a link is clicked. That's not the normal behavior of bootstrap.

Here's my code in the fiddle.

$(".dropdown-menu a").click(function() { $(this).closest(".dropdown-menu").prev().toggle(); });

http://jsfiddle.net/fw7vh/158/

I recently browsed into existing answers but it removes the dropdown button. Please advise. Thanks!

Answer 1

Try with:

$(".dropdown-menu a").click(function() {
    var menu = $(this).closest(".dropdown-menu");
    $(menu).css('display','none');
    setTimeout(function(){
        $(menu).css('display','');
    },200);
});

Answer 2

If I understood your question correctly, this might help you.

    $(".dropdown-menu a").click(function() {
    $(this).closest(".dropdown-menu").toggle();
});

Answer 3

You can achieve this easily with replacing your code

$(".dropdown-menu a").click(function() {
  $(this).closest(".dropdown-menu").prev().toggle(); 
});

with this

$(".dropdown-menu a").click(function() { 
   $(document.body).click(); 
});

Here is the working fiddle