關閉失去焦點的菜單或點擊菜單項

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

這應該做的伎倆。