代码之家 › 专栏 › 技术社区 › ezkay

将“单击菜单外以关闭”jQuery/Javascript添加到具有.tggle()的菜单下拉列表中

menu css html jquery javascript

ezkay · 技术社区 · 9 年前

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

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

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

此外,你能告诉我这是否适用于手机等吗?我希望并认为是这样,因为它正在使用。点击,对吗?

这是指这篇帖子,我无法回复在那里提问的答案: How to change drop-down menu to drop-up menu

3 回复 | 直到 8 年前

rrk Manish Jangir 9 年前

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>

Golak Sarangi 9 年前

假设你想在有人点击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
    }
})

rrk Manish Jangir 9 年前

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

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

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

4 月前

Mass · 如何在Tailwind CSS v4中创建配置

4 月前

magenta placenta · 将css变量合并为一个变量

4 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

5 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

5 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

5 月前

Luckkks · 过渡色工作不正常

5 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

5 月前