закрытие выпадающего меню после нажатия на пункт меню

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>