Question

当我点击＆＃34;菜单＆＃34;，＆＃34; .submenu＆＃34;切换，我需要在外面点击然后＆＃34; .submenu＆＃34;应该隐藏。我已经在每个div中使用它像行一样，就像我们在应用程序中使用的那样，它位于右侧以进行编辑删除。提前谢谢。

HTML：

<div class="edit-goal-wrapper">
                        <div class="dropdown">
                            <a class="account" >Menu</a>
                            <div class="submenu">
                                <ul class="root">
                                    <li ><a href="#" >Edit Target Date</a></li>
                                    <li ><a href="#" >Remove Goal</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

CSS：

.edit-goal-wrapper .dropdown
{
    color: #555;
    margin: 0;

    right: 30px;
    text-align: left;
}
.edit-goal-wrapper .submenu
{
    background: #fff none repeat scroll 0 0;
    border-radius: 6px;
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    position: absolute;
    right: 5px;
    top: 0px;
    z-index: 100;
    width:150px;
    display:none;
}
.edit-goal-wrapper .dropdown li a
{
color: #555555;
display: block;
font-family: arial;
font-weight: normal;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}

.edit-goal-wrapper .dropdown li a:hover
{
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
.edit-goal-wrapper a.account 
{
    background: rgba(0, 0, 0, 0) url("icons/arrow.png") no-repeat scroll 116px 17px;
    color: #555;
    cursor: pointer;
    display: block;
    font-size: 30px;
    /*height: 28px;*/

    text-decoration: none;
    z-index: 110;

}
.edit-goal-wrapper .root
{
border-top: 1px solid #dedede;
    font-size: 12px; font-weight:normal;
    list-style: outside none none;
    margin: 0;
    padding: 4px 0 2px;
}

jQuery：

$(".edit-goal-wrapper a").click(function(){

                    $(this).next().toggle();

                });

Answer 1

如果要在单击外部时隐藏子菜单，请尝试：

$("body").click(function(e){
       if($('.submenu').find(e.target).length  == 0 && $(e.target).is(":not('.account')")) {
          $('.submenu').hide();
       } 
});

的jsfiddle：https://jsfiddle.net/z134L2ab/2/

或

$("body").click(function(e){
        if ($(e.target).is('.account')) {
           $('.submenu').toggle();
        } else if($('.submenu').find(e.target).length  == 0) {
           $('.submenu').hide();
        }
});

的jsfiddle：https://jsfiddle.net/z134L2ab/3/

单击外部隐藏元素

1 个答案: