javascript - How to hide a drop down menu after user clicks on an item? - Stack Overflow

admin管理员组

文章数量:1021930

I have created a dropdown menu using bootstrap with the following code:

<li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Examples    </a><ul class="dropdown-menu" id="examples">
      <li><a href="#" class="example" id="atlas" data-example-name="atlas">Atlas</a> </li>
      <li><a href="#" class="example" id="map" data-example-name="map"> Map</a></li>
    </ul>
  </li>

However, I am having trouble hiding the dropdown menu after a user clicks on one of the menu items. I have tried using Jquery, giving the following code:

$("#atlas").click(function(){
    $("#examples").show();
})  

but it requires me to click on a menu item twice (first time to perform its desired action, second time to finally hide it).

I have created a dropdown menu using bootstrap with the following code:

<li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Examples    </a><ul class="dropdown-menu" id="examples">
      <li><a href="#" class="example" id="atlas" data-example-name="atlas">Atlas</a> </li>
      <li><a href="#" class="example" id="map" data-example-name="map"> Map</a></li>
    </ul>
  </li>

However, I am having trouble hiding the dropdown menu after a user clicks on one of the menu items. I have tried using Jquery, giving the following code:

$("#atlas").click(function(){
    $("#examples").show();
})  

but it requires me to click on a menu item twice (first time to perform its desired action, second time to finally hide it).

• javascript
• jquery

Share Improve this question Follow edited May 11, 2016 at 14:45 koninos 5,37755 gold badges3333 silver badges5050 bronze badges asked May 11, 2016 at 14:39 ke.like.li 13722 gold badges33 silver badges1212 bronze badges 2

• I suggest you to add a "toggled" class that will show the menu, you can also add CSS transitions on it.. (sorry I don't have time to build an example) The jQuery will just have a ToggleClass method that will add or remove – miguelmpn Commented May 11, 2016 at 14:43
• are you trying to hide the entire drop down menu, or just the list items? – devlin carnate Commented May 11, 2016 at 14:48

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

There's a lot that could be done to improve this but mainly you just need to call hide on the menu when an element is clicked. Here is a codepen of it working.

// show/hide the menu when examples is clicked
$(".dropdown-toggle").on("click", function () {
  $(".dropdown-menu").toggle();
});

// hide the menu when an exmple is clicked
$(".example").on("click", function(){
    $(".dropdown-menu").hide(); 
});

I would say

$('.example').click(function(){ $('#examples').hide(); });

I think you want to this code.

dropdown-menu show always items. you click an item, hide it.

$('.example').on('click', function (event) {
  event.stopPropagation();
  $(this).hide();
});

Here's a fiddle

You can bind your event to the li itself, and hide it when clicked:

$('ul li').click(function() {
  $(this).hide();
});

Here is a Fiddle Demo.

If you want to use a class, you can do:

$('.example').click(function() {
  $(this).hide();
});

Here is a Fiddle Demo using the class.

I have created a dropdown menu using bootstrap with the following code:

<li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Examples    </a><ul class="dropdown-menu" id="examples">
      <li><a href="#" class="example" id="atlas" data-example-name="atlas">Atlas</a> </li>
      <li><a href="#" class="example" id="map" data-example-name="map"> Map</a></li>
    </ul>
  </li>

However, I am having trouble hiding the dropdown menu after a user clicks on one of the menu items. I have tried using Jquery, giving the following code:

$("#atlas").click(function(){
    $("#examples").show();
})  

but it requires me to click on a menu item twice (first time to perform its desired action, second time to finally hide it).

I have created a dropdown menu using bootstrap with the following code:

<li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Examples    </a><ul class="dropdown-menu" id="examples">
      <li><a href="#" class="example" id="atlas" data-example-name="atlas">Atlas</a> </li>
      <li><a href="#" class="example" id="map" data-example-name="map"> Map</a></li>
    </ul>
  </li>

However, I am having trouble hiding the dropdown menu after a user clicks on one of the menu items. I have tried using Jquery, giving the following code:

$("#atlas").click(function(){
    $("#examples").show();
})  

but it requires me to click on a menu item twice (first time to perform its desired action, second time to finally hide it).

• javascript
• jquery

Share Improve this question Follow edited May 11, 2016 at 14:45 koninos 5,37755 gold badges3333 silver badges5050 bronze badges asked May 11, 2016 at 14:39 ke.like.li 13722 gold badges33 silver badges1212 bronze badges 2

• I suggest you to add a "toggled" class that will show the menu, you can also add CSS transitions on it.. (sorry I don't have time to build an example) The jQuery will just have a ToggleClass method that will add or remove – miguelmpn Commented May 11, 2016 at 14:43
• are you trying to hide the entire drop down menu, or just the list items? – devlin carnate Commented May 11, 2016 at 14:48

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

There's a lot that could be done to improve this but mainly you just need to call hide on the menu when an element is clicked. Here is a codepen of it working.

// show/hide the menu when examples is clicked
$(".dropdown-toggle").on("click", function () {
  $(".dropdown-menu").toggle();
});

// hide the menu when an exmple is clicked
$(".example").on("click", function(){
    $(".dropdown-menu").hide(); 
});

I would say

$('.example').click(function(){ $('#examples').hide(); });

I think you want to this code.

dropdown-menu show always items. you click an item, hide it.

$('.example').on('click', function (event) {
  event.stopPropagation();
  $(this).hide();
});

Here's a fiddle

You can bind your event to the li itself, and hide it when clicked:

$('ul li').click(function() {
  $(this).hide();
});

Here is a Fiddle Demo.

If you want to use a class, you can do:

$('.example').click(function() {
  $(this).hide();
});

Here is a Fiddle Demo using the class.

本文标签： javascriptHow to hide a drop down menu after user clicks on an itemStack Overflow