메뉴 항목을 클릭 한 후 드롭 다운 메뉴를 닫습니다.

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

대신에 당신이하고있는 일을, 나는 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>