点击菜单项后关闭下拉菜单
问题描述:
当我点击一个按钮时,菜单下拉菜单项出现。目前,当我点击一个菜单项时,页面变为点击内容,但菜单列表仍然出现,点击菜单项后不会消失。我需要添加到我的脚本中,以便在点击任何菜单项后菜单将关闭。点击菜单项后关闭下拉菜单
菜单按钮:
<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>
答
而不是做你正在做什么,我会建议使用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>
+0
我注意到,当我点击其中一个选项后,菜单不会折叠并保持打开状态 - 我想在点击选项 – user3244544 2014-09-30 18:28:07
+0
@ user3244544完成后折叠,请再次尝试该代码段。 – Mike 2014-09-30 18:32:51
是有一个很好的理由使用text/html的脚本,而不是使用Javascript? – Mike 2014-09-30 17:55:22