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
Related
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") });
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.
So i'm trying to make a jquery dropdown that adds and removes classes. It does work, but only once. If i try the dropdown again, it simply drops down and slides up right after. It's suppose to drop down after clicking a button and slide up after another click.
$(document).ready(function() {
//dropdown menu function
$(".menuDrop").click(function(){
$(".nav").slideDown("slow");
$(".menuDrop").addClass("btn-hover");
$(".menuDrop").click(function(){
$(".nav").slideUp("slow");
$(".menuDrop").removeClass("btn-hover");
});
});
});
The "btn-hover" class is meant to add the same css as it where in a hover state once the button is clicked.
--edit--
<div class="menu">
<div class="col-lg-12">
<button type="button" class="menuDrop btn btn-default btn-lg">
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<ul class="nav">
<li><a class="link" href="#">home</a></li>
<hr>
<li>portfolio</li>
</ul>
</div>
</div>
Using slideToggle and toggleClass should help you achieve this, and with less code:
//dropdown menu function
$(".menuDrop").click(function(){
$(".nav").slideToggle("slow");
$(".menuDrop").toggleClass("btn-hover");
});
Here's a fiddle: http://jsfiddle.net/scesR/
Hope that helps!
Bind it using change event, instead of click event.
$(".menuDrop").change(function(){
$(".nav").slideDown("slow");
$(".menuDrop").addClass("btn-hover");
$(".menuDrop").click(function(){
$(".nav").slideUp("slow");
$(".menuDrop").removeClass("btn-hover");
});
});
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
I have a popover triggered by a dropdown menu using the standard Twitter Bootstrap javascript components.
Can you help me prevent the dropdown from closing while a user clicks on the popover?
Here's a fiddle: http://jsfiddle.net/EAdW5/
UX:
Click dropdown menu button ===> Dropdown menu displays
Click popover dropdown item ===> Popover displays
Click Popover ===> Dropdown menu and popover disappears! O no! How can I prevent this?
I'd like the popover and dropdown to remain up until (a) click outside dropdown and popover, or (b) deliberate hide (after clicking popover form submit, for example).
html:
<div class="btn-group">
<button id="btnId" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Regular Link 1</li>
<li>Regular Link 2</li>
<li>Popover Link</li>
</ul>
</div>
<div class="hide" id="popover-custom-content">
<div class="form-inline">
<div class="control-group">
<textarea name="issue"></textarea>
</div>
<div class="control-group">
<button id="btnPopoverSubmitId" class="btn">Add</button>
<span class="close close-inline">Cancel</span>
</div>
</div>
</div>
JS:
$('#popoverId').popover({
html:true,
placement: 'right',
title: "Popover Title",
template: '<div id="popover-custom-content" class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
content: function() { return $('#popover-custom-content').html(); }
});
According to the Bootstrap DROPDOWN class definition, the dropdown is registered as active using $parent.toggleClass('open'). In this case it adds the class 'open' to the btn-group div which is the parent of your 'btnId' element.
You could prevent the default DROPDOWN show/hide toggle, and override it using $('.btn-group').show(); to keep it shown, regardless of the Bootstrap default behavior.
Then use $('.btn-group').hide() on a custom 'mousedown' event of yours, as well as on a 'mouseout' of the btn-group node, to restore the default Bootstrap behavior.
Or, you may also check the jQuery event.stopPropagation() or event.stopImmediatePropagation() to prevents the click event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event. http://api.jquery.com/event.stopPropagation/