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

Question

when i click on a button a menu dropdown appears with menu items within. Currently when i click on a menu item the page changes to the clicked content but the menu list still appear and doesn't go away after clicking on a menu item. What do i need to add to my script so that after clicking on any of the menu items the menu would close.

menu button:

<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>

this is the script when clicking on a menu item:

<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

Instead of doing what you're doing, I would recommend utilizing javascript to achieve a DDL list with UL's and LI elements.

 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>