Question

我有一个正常工作的菜单栏但我想在此菜单中添加一个关闭功能。我可以看到的大多数菜单栏都会在失去焦点时自动关闭并点击菜单项。

HTML

<nav id="sidebar-wrapper" class="active">

    <a id="menu-close" href="#" class="close-btn toggle">Close <i class="ion-log-in"></i></a>
    <ul class="sidebar-nav">

        <li><a href="index.html" class="ng-binding"><font size="5"><i class="ion ion-ios-home-outline"></i> </font>Home</a></li> 

        <li><a href="logout.html" class="ng-binding"><font size="5"><i class="ion ion-android-exit"></i> </font>Logout</a></li> 

        <li><a href="settings.html" class="ng-binding"><font size="5"><i class="ion ion-gear-b"></i> </font>Settings</a></li> 

        <li><a href="contact_us.html" class="ng-binding"><font size="5"><i class="ion ion-help"></i> </font>Support</a></li> 

        <li><a href="tnc.html" class="ng-binding"><font size="5"><i class="ion ion-document-text"></i> </font>T&amp;C</a></li> 

        <li><a href="privacy_policy.html" class="ng-binding"><font size="5"><i class="ion ion-ios-locked-outline"></i> </font>Privacy Policy</a></li> 

    </ul>
</nav>

CSS

#sidebar-wrapper {
    z-index:1000;
    position:fixed;
    right:0;
    width:250px;
    height:100%;
    margin-right:-300px;
    overflow-x: hidden;
    overflow-y:auto;
    /*background:#41A1E1 url(../img/stripBG.png);*/
    background:#050433; 
    z-index:99999999;
    -webkit-transition:all 0.4s ease 0s;
    -moz-transition:all 0.4s ease 0s;
    -ms-transition:all 0.4s ease 0s;
    -o-transition:all 0.4s ease 0s;
    transition:all 0.4s ease 0s;
}
.sidebar-nav {
    position:absolute;
    width:350px;
    margin:0;
    padding:0;
    list-style:none;
}
.sidebar-nav li {
    text-indent:4px;
    line-height:10px;
    border-bottom:1px dotted rgba(255,255,255,0.27);
}
.sidebar-nav li a {
    display:block;
    text-decoration:none;
    color:#FFF;
    font-family: sans-serif;
    letter-spacing: 0.0625em;
    font-size:9px;
    padding:10px 10px;
}
.sidebar-nav li a:hover {
    text-decoration:none;
    color:#81F89D;
}
.sidebar-nav li a:active,.sidebar-nav li a:focus {
    text-decoration:none;
}
.sidebar-nav>.sidebar-brand {
    height:55px;
    font-size:18px;
    line-height:55px;
}
.sidebar-nav>.sidebar-brand a {
    color:#999;
}
.sidebar-nav>.sidebar-brand a:hover {
    color:#fff;
    background:none;
}
#sidebar-wrapper.active {
    right:200px;
    width:260px; /*260 */
    -webkit-transition:all 0.4s ease 0s;
    -moz-transition:all 0.4s ease 0s;
    -ms-transition:all 0.4s ease 0s;
    -o-transition:all 0.4s ease 0s;
    transition:all 0.4s ease 0s;
    box-shadow:0px 0px 15px rgba(0,0,0,0.49);
}

请告知我如何关闭失去焦点的div并单击菜单项。

Answer 1

好吧，如果我是对的，你想关闭“模糊”和“点击”菜单。如果这是你正在尝试的那么代码不应该那么难。首先创建关闭菜单的基本功能。如果您只想隐藏它，可以$("div.menu").hide()。

现在让我们通过添加模糊将其分配给事件：

$("nav#sidebar-wrapper").on("blur", function () {
    $(this).hide()
});

点击按钮：

$("nav#sidebar-wrapper > ul > li").on("click", function () {
    $("nav#sidebar-wrapper").hide()
});

这应该可以解决问题。

丢失焦点关闭菜单或单击菜单项

1 个答案: