CODEWITHSUNDEEP
javascriptjquerycssangularjs
krish
krish

Reputation: 1117

Close dropdown when dropdown list is clicked

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>

I have this list in my header. Here when I click on my requests sub ul will be opened.Its working good.

Now am trying to close the dropdown when dropdown li is clicked.But its not working.How can I do it?

I feel angularjs/css answer would be helpful than jquery/javascript for me.

Upvotes: 0

Views: 46

Answers (1)

Manikant Gautam
Manikant Gautam

Reputation: 3581

Make your button looks like <a href="javascript:void(0)">Closed </a> And inside closeList() add 

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

Upvotes: 1

Related Questions