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

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 来实现一个带有 UL 和 LI 元素的 DDL 列表。

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>