4

I have a simple Dropdown menu that I am showing on inline text links. I am using jQuery click event to show the Dropdown menu when a link is clicked on.

What I would like to do is have the Dropdown menu go back to a hidden state when a click anywhere is made. Right now you have to click the link again to close the menu.

Demo http://codepen.io/jasondavis/pen/sFpwK?editors=101

jQuery

// Show Dropdown Menu when link is clicked
$(function(){
  $(".inline-dropdown-menu").click(function(e){
    $(this).find(".inline-dropdown-menu-list:first").toggle();
    e.preventDefault(); // Stop navigation
  });
});

HTML

<span class="inline-dropdown-menu">
    <a href="">My Link that reveals a DropDown Menu when clicked on<span class="caret"></span></a>

    <ul class="inline-dropdown-menu-list">
        <li class="bottomBorder">
            <a href="" tabindex="-1">alphabetically</a>
        </li>
        <li>
            <a href="" tabindex="-1">2. the first report, alphabetically</a>
        </li>
        <li>
            <a href="" tabindex="-1">3. the first report, alphabetically</a>
        </li>
    </ul>
</span>
JasonDavis
  • 48,204
  • 100
  • 318
  • 537

6 Answers6

4

http://codepen.io/anon/pen/JmLsB

$(function () {
    $(".inline-dropdown-menu").click(function (e) {
        $(".inline-dropdown-menu-list").hide(); // to hide other drop down
        $(this).find(".inline-dropdown-menu-list:first").toggle();

        e.preventDefault(); // Stop navigation
    });
});

// to hide drop down if you click other than inline-dropdown-menu class

$(document).click(function (e) {
    var container = $(".inline-dropdown-menu");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
        $(".inline-dropdown-menu-list").hide();
    }
});
Vitorino fernandes
  • 15,794
  • 3
  • 20
  • 39
3

This might be useful:

var flag = false;

$(".inline-dropdown-menu").click(function(e){
    $(".inline-dropdown-menu-list").not(':hidden').hide();
    $(this).find(".inline-dropdown-menu-list:first").toggle();
    e.preventDefault(); // Stop navigation
    flag = true;   
});

$('body').click(function(){
    if (flag) {
        flag = false;
        return;
    }

    $(".inline-dropdown-menu-list").not(':hidden').hide();
});
tvahid
  • 210
  • 1
  • 9
1

try this

$(function(){
  $(".inline-dropdown-menu").click(function(e){
e.stopPropagation();
$(this).find(".inline-dropdown-menu-list:first").toggle();
e.preventDefault(); // Stop navigation
 });

$("body").click(function(e){
$(".inline-dropdown-menu-list").hide();
});

});
Kaustav
  • 126
  • 5
0

When your link is clicked, you will have to add a click event to body. When body is clicked, you can hide your dropdown, and also remove the event on body again. I used an setTimeout to prevent double click. I also add a namespace to the click event on body (click.ddls), so you can have other click events.

So check this demo out: http://jsfiddle.net/gdxyef46/2/

// Show Dropdown Menu when link is clicked
$(function(){

  $(".inline-dropdown-menu a").click(function(e){
      e.preventDefault(); // Stop navigation
      $("body").off("click.ddls");
      $(".inline-dropdown-menu-list").toggle();

      //to prevent double click
      setTimeout(function(){
          $("body").on("click.ddls", function(){
              console.log("body clicked");
              $(".inline-dropdown-menu-list").hide();
              $("body").off("click.ddls");
          });
      }, 300);
  });

});
Morten OC
  • 1,784
  • 2
  • 23
  • 30
  • When clicking more than one time on link, That does not work truely – Mohammad Kermani Oct 20 '14 at 06:34
  • Downvoters.. why?? All other answers assigns a click event on body the whole time, which is bad, because it fill up the memory. Also, none of the use a namespace... – Morten OC Oct 20 '14 at 06:52
  • OK, I remove Down vote. But again does not Working when I click on body! – Mohammad Kermani Oct 20 '14 at 07:08
  • @Kermani It does work however on that JSFiddle page, if you inspect document you can see that the IFrame is not very tall so in that demo you have to make sure you are clicking the body within the short iframe area, it does appear to work though – JasonDavis Oct 20 '14 at 07:09
  • @Kermani which browser are you using? I tested in FF and chrome.. – Morten OC Oct 20 '14 at 07:10
  • Does not Working yet, I am using Firefox 33 , And you are right it is working when click near the span, and when I click on free and white space at the end of page Does not working, Change body with html, Check my example http://jsfiddle.net/gdxyef46/3/ – Mohammad Kermani Oct 20 '14 at 07:34
0

without unique class names, you could loop through them and check if they are visible and if so , close it. This code isn't working (apologies), but will hopefully point you in the right direction. I personally like to use on("click") vs click() in case you are dealing with dynamic elements that the DOM doesn't have access to yet. 

     $('*').not(".inline-dropdown-menu").on("click", function(){
         $('.inline-dropdown-menu-list').each(function() {
             if ($(this).is(":visible")) {
                 $(this).toggle();
             }                                                                 
         });

You could also create a counter based on $('.inline-dropdown-menu-list').length and assign a data-id to each so you can match and keep track of them. Hope this helps.

cpk
  • 809
  • 1
  • 6
  • 20
-1

If I understand you correctly you want to to replicate what the drop down arrow is doing, when you click on the body. If that is so, then try this:

$("body").click(function(e){
$('.inline-dropdown-menu.open ').find('.inline-dropdown-menu-list:first').toggle();
});

link to demo. But do note that if you click the body again it will again show the drop down. You can play around to remove that if you don't want that.

Aameer
  • 1,366
  • 1
  • 11
  • 30