在菜单外添加一个“点击”按钮以关闭菜单.jQuery / Javascript到一个带有.toggle()的下拉菜单

Add an "click outside of menu to close" jQuery / Javascript to a menu drop-up that has .toggle()

本文关键字：一个 菜单 Javascript toggle jQuery 下拉菜单 按钮 添加 点击      更新时间：2023-09-26

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

并且也保持菜单按钮工作以关闭它:https://jsfiddle.net/ezkay/1he5bhzt/

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

你还能告诉我这是否适用于手机等吗?我希望也这么认为，因为它使用的是。click，对吧?

这是指这篇文章，我不能回答那里的问题:如何将下拉菜单更改为下拉菜单

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>

假设您希望在有人在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
    }
})

我会将click事件附加到文档，然后检查子元素。假设你的LI元素有一个类"menu":

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