点击下拉菜单如何实现?

lzc3905
  • 36

类似于本站用户登录后,登录名后箭头那样:
鼠标点击弹出,再次点击关闭;这个能实现
鼠标点击弹出,点击页面其它地方,菜单关闭;这个怎么实现

初步设想是在页面上注册点击事件,判断显示后关闭,不知各位有什么更好的实现没有。

回复
阅读 7.3k
3 个回答
✓ 已被采纳

一段示例,我把下拉菜单定义了个.dropdown的类

if($(".dropdown").length!=0){
    $(".dropdown").each(function(e){
        var dropdown_menu = $(this).find('.dropdown_menu');
        $(this).click(function(){
            dropdown_menu.slideToggle();
        });

        $(document).mouseup(function(e) {
            if (dropdown_menu.is(":visible") && $(e.target).parents('.dropdown').length == 0) {
                dropdown_menu.slideUp();
            }
        });
    });
}

我还是补上HTML结构吧

<div class="dropdown">
    <span>下拉菜单</span>
    <ul class="dropdown_menu">
        <li></li>
        <li></li>
        <li></li>
    </div>
</div>

CSS就不用了吧,自己发挥想象力

在页面上注册点击事件,判断事件源,如果不是弹出菜单并且菜单处于open状态则关闭。
在实现弹窗的非弹窗区域点击时关闭弹窗也是这样的处理思路。

最简单的方法是用一个$(html)的click事件,但是要在很多地方写阻止冒泡的代码比较麻烦

有个技巧就是$(html).one();

只会运行一次就解绑

宣传栏