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") });
Related
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
I have a button which on clicked shows a dropdown we are using bootstrap to show the dropdown on button click below is my code.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
The requirement is that I have to show a div pop up stating system error which will occur only when the button click is not working.
How to check if button click is working or not and show pop up.
The above code is a sample code from w3schools
my main code is written in angularjs and I am using angualar-ui-bootstrap for the drop down. the list values are also coming from the controller.
I have a dropdown menu which toggles on click, and I've gotten rid of jQuery completely so that I can toggle the menu using just AngularJS. The problem is that if the dropdown section is visible, then you have to click the button again to hide it. So the only way to toggle the menu is to use the button right now, and I want users to be able to close the menu by simply clicking somewhere on the page that isn't the menu.
So here's my code right now:
<button type="button" class="btn btn-nav dropdown-toggle" aria-expanded="false" ng-click="showMenu = !showMenu">
{{ getNavTitle() | translate }} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" ng-class="{ show: showMenu === true }">
<li>
<a id="hottest" ng-click="nav.replaceTo('/one')" ng-class="{active: subnav === 'top'}"><big>{{ 'subnav-one' | translate }}</big></a>
</li>
<li>
<a id="latest" ng-click="nav.replaceTo('/two')" ng-class="{active: subnav === 'latest'}"><big>{{ 'subnav-two' | translate }}</big></a>
</li>
<li>
<a id="friends" ng-click="nav.replaceTo('/three')" ng-class="{active: subnav === 'fans'}"><big>{{ 'subnav-three' | translate }}</big></a>
</li>
</ul>
AngularJS:
$scope.showMenu = false;
So this works. With jQuery I would just listen for a tap somewhere on the page which wasn't one of the three drop down links and the toggle button, and close the menu. But with AngularJS, I'm unsure how to go about doing that.
I guess you're using bootstrap. You could use angular-bootstrap or the bootstrap.js itself. I think the auto close feature should already be implemented there.
If you wanna implement it yourself add a click event handler, which closes the menu, to the body with 'once', so the handler will be executed once and then removed from the event listeners.
I have a twitter bootsrap dropdown ,
<button class="dropdown-toggle" data-toggle="dropdown" >
<span>Select</span>
<span class="pull-right" ng-click="showpopup();">Show popup</span>
</button>
<ul class="dropdown-menu">
...drop down.....
My issue is that clicking on showpopup function also dropdown will dsiplay .( i know it is because of part of drop down).I cannot move showpopup span outside of dropdown.
Clicking on showpopup function should not open drop-down.
Is there any way to achieve this .
Please suggest
You can try to stop propagation after your ng-click function being executed.
Like this:
<span class="pull-right" ng-click="showpopup(); $event.stopPropagation();">Show popup</span>
This prevents the event from being propagated to the outer DOM elements.
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