Develop Reference

Dropdown on icon, bootstrap

I'm using bootstrap (I have bootstrap and jquery included and dropdowns working elsewhere) and tryingo to use my profile icon as a trigger for a dropdown with an option to logout.
My profile icon is showing the downward caret like it's a dropdown, but when I click there is no dropdown triggered.
I can't use a button here, it needs to be tied to the icon.
What exactly am I doing wrong?
<div class="dropdown">
<div class="menu-button profile dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="far fa-user-circle fa-2x"></i>
</div>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</div>

Prevent default click action based on another class existing on the page

I have the following CSS code that when the .dashboard-actions class is clicked opens up a dropdown menu. Once clicked the 2nd div in the tree .dropdown changes to class="dropdown open" (indicates the dropdown menu is open/visible), once the user clicks off the open class is removed and the dropdown menu disappears (as expected).
I want to be able using some form of javascript (AngularJS 1.3 or jQuery) be able to do some logic to recognise when the dropdown is 'open' - if so, if a user clicks anywhere else on the screen, for instance the href below the div it will open 'close' the dropdown by removing the 'open' class rather than doing that default action, how could I best approach 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>

Hope you are searching for this
//Some code
$('.dropdown-menu').each({
if($(this).hasClass('open')){
// Do something
// $(this).removeClass('open');
}
});
//More code

How can I make a dropdown menu open with a keydown event?

Im using a bootstrap example of a dropdown menu. It opens and closes just how it should with a mouse click. I'm wondering how can I configure this code to mimic the same functionality when using the keyboard?
I don't want to create a new custom control. By hitting "tab" I can move from one focusable element to another.
What I've tried:
I've attached the role="button" attribute, as well as a tabindex=0. When I hit tab until i get to the dropdown menu icon (chevron-down), It opens up the menu when I hit the spacebar. However I cant close the dropdown menu, rather it stays open. Can anyone share any ideas on how to open and close this menu?
<div class="appExperience small-tile">
<div class="blue-bar">
<h2 class="tile-header">APPLICATION EXPERIENCE</h2>
<span class="dropdown hidden-xs">
<i class="tcm-chevron glyphicon glyphicon-chevron-down expand-icon dropdown-toggle"
role="button"
aria-labledby="Expand Application Experience Summary Dropdown Menu"
ng-src="{{dropdown_appExperience}}"
data-toggle="dropdown"
tabindex="0"
alt="Expand Application Experience Summary Dropdown Menu"></i>
<ul class="dropdown-menu appExperience tileContextMenu">
<li>
List Item 1
</li>
<li>
List Item 2
</li>
...

Ultimately, you can trigger a click event from JavaScript. If you're familiar with jQuery, you can do for instance:
$(window).on("keydown", function(){ $(".dropdown").trigger("click") });

Stop Angular UI bootstrap dropdown from closing in certain cases?

I have a dropdown which contains tabs and buttons. I want to be able to click the tabs without the dropdown closing but if I click a button it will close.
I used $event.stopPropagation() to stop the closing but obviously this blocks the buttons closing it too.
Is there a way to do this?

By default the dropdown will automatically close if any of its elements is clicked, you can change this behavior by setting the auto-close option as follows:
always - (Default) automatically closes the dropdown when any of its elements is clicked.
outsideClick - closes the dropdown automatically only when the user clicks any element outside the dropdown.
disabled - disables the auto close. You can then control the open/close status of the dropdown manually, by using is-open. Please notice that the dropdown will still close if the toggle is clicked, the esc key is pressed or another dropdown is open.
Here is a sample : Plunker
<div class="btn-group" dropdown auto-close="disabled">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>

Twitter Bootstrap Dropdown button and radio button

What's the logic for drop down button and radio button in twitter bootstrap ...I have seen only drop down menu in twitter bootstrap..Can anybody help me?

Button Dropdowns:
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>
I'm not sure what you are asking though in terms of radio buttons so I think you should read Bootstrap's Form documentation, available at http://twitter.github.io/bootstrap/base-css.html#forms