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

Posted 2023-05-08

【中文标题】单击下拉列表时关闭下拉列表

【英文标题】：Close dropdown when dropdown list is clicked

【发布时间】：2019-01-05 11:50:44

【问题描述】：

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 更有帮助。

【参考方案1】：

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

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

【讨论】：

爱你 ;-);-);-)

一个疑问，css 在我的代码中无法正常工作。当我将鼠标悬停在列表中时，我正在添加背景，但应用不正确。我在左侧获得了一些空间。如果你有空请帮助我修复它。

这将是我的最终查询 ;-)