将“单击菜单外以关闭”jQuery / Javascript 添加到具有 .toggle() 的菜单下拉菜单答案

【问题标题】：Add an "click outside of menu to close" jQuery / Javascript to a menu drop-up that has .toggle()将“单击菜单外以关闭”jQuery / Javascript 添加到具有 .toggle() 的菜单下拉菜单
【发布时间】：2015-11-06 20:53:17
【问题描述】：

如果我在菜单外单击，我想添加关闭菜单的功能。

同时保持菜单按钮也可以关闭它：https://jsfiddle.net/ezkay/1he5bhzt/

$(document).ready(function () {
    $("li").click(function () {
        $('li > ul').not($(this).children("ul").toggle()).hide();
    });
});

你能告诉我这是否适用于移动设备等吗？我希望并这么认为，因为它使用的是 .click，对吧？

这是指这篇文章，我无法回复那里的答案： How to change drop-down menu to drop-up menu

【问题讨论】：

标签： javascript jquery html css menu

【解决方案1】：

DEMO

以下是诀窍。

$(document).on('click',function (e) {
  footerUl = $('ul:first li');
  if (!footerUl.is(e.target) 
      && footerUl.has(e.target).length === 0){
    footerUl.children('ul').hide();
  }
});

$(document).ready(function () {
  $("li").click(function () {
    $('li > ul').not($(this).children("ul").toggle()).hide();
  });
});

$(document).on('click',function (e) {
  footerUl = $('ul:first li');
  if (!footerUl.is(e.target) 
      && footerUl.has(e.target).length === 0){
    footerUl.children('ul').hide();
  }
});

div {
    background: #999999;
    height: 40px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #000000;
    margin: -8px;
    width:100%;
    position:fixed;
    bottom:0px;
}
ul, li, a {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
    color: #000000;
}
ul > li {
    float: right;
}
ul > li a {
    color: #fff;
    font-weight: bold;
    line-height: 40px;
    height:40px;
    display:block;
    padding:0px 10px;
}
ul li a:hover {
    background: #666666;
}
ul li ul {
    display: none;
    position: absolute;
    background: #333333;
    bottom:40px;
    width: 200px;
    right: 0px;
}
ul li ul li {
    float: none;
    line-height: 40px;
    height: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
    <ul>
        <li><a href="#">=</a>

            <ul>
                <li><a href="#">one</a>
                </li>
                <li><a href="#">two</a>
                </li>
                <li><a href="#">three</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

【讨论】：

这太好了，谢谢！如果可以的话会给你100分;D

【解决方案2】：

假设你想在有人点击 ul 标签外时关闭。您需要捕获文档中的所有点击事件。然后检查点击是否发生在 ul 标签之外。如果它在外面，则关闭菜单

var myelement = $('ul')
$(document).on('click', function(e) {
    var el = e.target();
    if(!$.contains(myelement, el)) { //checks if the click happened outside the ul tag
        //close menu
    }
})

【讨论】：

基本上你需要捕获文档中的所有点击。检查单击是否在菜单中的 Dos 内。如果不是，则在菜单外单击。
感谢您发布此问题的答案！在 Stack Overflow 上不鼓励仅使用代码的答案，因为没有上下文的代码转储无法解释解决方案的工作方式或原因，这使得原始发布者（或任何未来的读者）难以理解其背后的逻辑。请编辑您的问题并包含对您的代码的解释，以便其他人可以从您的回答中受益。谢谢！

【解决方案3】：

我会将点击事件附加到文档，然后检查子元素。假设您的 LI 元素具有“菜单”类：

$(document).click(function(e) {
    var $clicked = $(e.target);
    if (!$clicked.parents().hasClass("menu")) {
        //close menu here
    }
});

【讨论】：

谢谢！但我不明白如何让这个工作 -.- 可能我必须给所有的 ul 和 li 上课。但是女巫需要`.menu？