My CSS code triggers a dropdown menu to open when the .dashboard-actions class is clicked. When the user clicks, the class of the 2nd div in the tree changes to "dropdown open", indicating that the dropdown menu is visible. Clicking off the menu removes the "open" class and hides the dropdown menu as expected.
I'm looking to implement some logic using JavaScript (AngularJS 1.3 or jQuery) to detect when the dropdown is 'open'. If it is open and the user clicks anywhere else on the screen, such as the href below the div, I want to close the dropdown by removing the 'open' class instead of performing the default action. How should I go about achieving this?
<div class="dashboard-actions ellipsis">
<div class="dropdown" stop-event>
<div class="dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="material-icons">more_vert</span>
</div>
<ul class="dropdown-menu" aria-labelledby="dropdown1">
<div>
<div ng-include src="'templates/menu.html'" ng-repeat="x in item.x"></div>
</div>
</ul>
</div>
</div>
<div class="interaction-body">
<a href="https://somecdn.com/t51.2885-15/aaa.jpg" ng-href="https://somecdn.com/t51.2885-15/aaa.jpg" target="_blank" stop-event="">
<img ng-src="https://somecdn.com/t51.2885-15/aaa.jpg" src="https://somecdn.com/t51.2885-15/aaa.jpg"></a>
</div>