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
时关闭dropdown li
。但是它不起作用。我该怎么办?
我觉得angularjs / css的答案对我来说比jquery / javascript有用。
答案 0 :(得分:1)
使按钮看起来像<a href="javascript:void(0)">Closed </a>
在closeList()
里面
添加
var myReqTypes = document.getElementById("myReqTypes");
myReqTypes.style.display = "none";