关闭失去焦点的菜单或点击菜单项

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); 
} 

请告知我怎么能收在失去重心的格，然后单击菜单项。

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() 
}); 

这应该做的伎俩。