點擊菜單項後關閉下拉菜單

Question

當我點擊一個按鈕時，菜單下拉菜單項出現。目前，當我點擊一個菜單項時，頁面變爲點擊內容，但菜單列表仍然出現，點擊菜單項後不會消失。我需要添加到我的腳本中，以便在點擊任何菜單項後菜單將關閉。

菜單按鈕：

<button type="button" class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse"> 
    </button> 


<div class="nav-collapse collapse" style="height: 0px;"> 
     <ul id="Menu" data-bind="template: { name: 'menuItems', foreach: menuItemList, as: 'menuItem' }" class="nav"> 
     </ul> 
    </div> 

這是劇本上的菜單項時，點擊：

<script type="text/html" id="menuItems"> 
    <li class="dropdown" data-bind="css: { active: isActive }"> 
     <a class="dropdown-toggle" data-bind="text: title, attr: { href: url }"> 
     </a> 
    </li> 
</script> 

Answer 1

而不是做你正在做什麼，我會建議使用javascript來實現一個DDL列出UL和LI元素。

var _ddls = $(".DropDownList"); 
 

 
_ddls.click(function() { 
 
    $(this).children().slideUp(); 
 
}); 
 

 
_ddls.hover(function() { 
 
    $(this).children().slideDown(); 
 
}, function() { 
 
    $(this).children().slideUp(); 
 
});

.DropDownList { 
 
    list-style:none; 
 
} 
 

 
.DropDownList li 
 
{ 
 
    display:none; 
 
} 
 

 
#ddl_example 
 
{ 
 
    background-color:red; 
 
    width:100px; 
 
    height:20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<ul id="ddl_example" class='DropDownList'>Menu 
 
    <li id='option1'><a href='javascript:void()'>Option 1</a></li> 
 
    <li id='option2'><a href='javascript:void()'>Option 2</a></li> 
 
    <li id='option3'><a href='javascript:void()'>Option 3</a></li> 
 
    <li id='option4'><a href='javascript:void()'>Option 4</a></li> 
 
    <li id='option5'><a href='javascript:void()'>Option 5</a></li> 
 
    <li id='option6'><a href='javascript:void()'>Option 6</a></li> 
 
</ul>