点击菜单项后关闭下拉菜单

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>