javascript - 单击下拉列表时关闭下拉列表

Question

var app=angular.module('myApp',[])
app.controller('formCtrl', function($scope) {

   $scope.myRequests= function(){
		var myReqTypes = document.getElementById("myReqTypes");
    if(myReqTypes.style.display === "none"){
     myReqTypes.style.display = "block";
    } else {
     myReqTypes.style.display = "none";
    }   
	}
  
	$scope.closeList =function(){alert()
		$('#myReqTypes').hide();
	}
  
});

#myReqTypes {
    z-index: 999;
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, .2);
    list-style-type: none;
    padding-left: 12px;
    left: 17%;
    top: 90%;
}

#myReqTypes a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
#myReqTypes a:hover {background-color: #ddd;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app='myApp' ng-controller='formCtrl'>

<li>
    <a href="/hrportal?id=kb_search">FAQs</a>
 </li>
  <li>
      <a href="/hrportal?id=hr_help">Help Me</a>
  </li>
   <li>
       <a href="" ng-click='myRequests()'>My Requests</a>
       <ul id="myReqTypes">
          <li ng-click='closeList()'><a href="/sts">Open </a></li>
          <li ng-click='closeList()'><a href="/ats">Closed </a>       </li>
        </ul>
   </li>

我的标题中有这个列表。在这里，当我点击 my requests 时，子 ul 将被打开。它运行良好。

现在我试图在单击 dropdown li 时关闭 dropdown。但它不起作用。我该怎么做？

我觉得 angularjs/css 答案对我来说比 jquery/javascript 更有帮助。

Answer 1

让你的按钮看起来像<a href="javascript:void(0)">Closed </a> 里面closeList() 添加

 var myReqTypes = document.getElementById("myReqTypes");
 myReqTypes.style.display = "none";