Question

我有一个简单的下拉菜单，我在内联文字链接上显示。我在点击链接时使用jQuery click事件显示Dropdown菜单。

我想做的是在任何地方点击时，Dropdown菜单会回到隐藏状态。现在，您必须再次单击该链接以关闭菜单。

演示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>

Answer 1

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

Answer 2

这可能有用：

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

Answer 3

试试这个

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

});

Answer 4

点击链接后，您必须向正文添加点击事件。单击正文时，您可以隐藏下拉列表，并再次删除正文上的事件。我使用setTimeout来防止双击。我还为body上的click事件添加了一个命名空间（click.ddls），这样你就可以有其他点击事件。

请查看此演示：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);
  });

});

Answer 5

没有唯一的类名，你可以循环遍历它们并检查它们是否可见，如果是，则关闭它。这段代码不起作用（道歉），但希望能指出正确的方向。我个人喜欢使用on("click") vs click()，以防您处理DOM尚无法访问的动态元素。

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

您还可以根据$('.inline-dropdown-menu-list').length创建一个计数器，并为每个计数器分配data-id，以便您可以匹配并跟踪它们。希望这可以帮助。

Answer 6

如果我理解正确你想要复制下拉箭头正在做什么，当你点击身体时。如果是这样，那么试试这个：

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

链接到demo。但请注意，如果再次单击正文，它将再次显示下拉列表。如果您不想要，可以使用它来删除它。

当您使用jQuery单击页面中的某个位置时关闭下拉菜单？

6 个答案: