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");
});
});
Related
On a static website, the main navigation is hidden on small screens and revealed when a hamburger icon is clicked. When revealed, I want the tab focus to be removed from the hamburger icon and set to the first menu item. I've tried various solutions found here, like using setTimeout, but nothing has worked.
<div class="header__item header__logo">
<div class="header__icon header__icon--mobileTrigger">
<button class="hamburger hamburger--spin" type="button" aria-label="open menu">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>
</div>
<div class="header__item header__nav" aria-label="main menu">
<nav role="navigation" class="nav__wrapper">
<div class="menu-header-menu-container">
<ul id="menu-header-menu" class="menu">
<li>Let's get started</li>
<li>More solutions</li>
</ul>
</div>
</nav>
</div>
<script>
$(document).on("click", ".header__icon--mobileTrigger", function (e) {
$(this).find(".hamburger").addClass("is-active").attr("aria-label", "close menu");
$(".header__nav").attr({
role:"dialog",
"aria-modal":"true",
tabindex:"-1"
});
$("#menu-focus").focus();
});
document.addEventListener('focus', function() {
console.log('focused: ', document.activeElement)
}, true);
</script>
I've tried blur() on the hamburger icon, various tab values, setTimeout functions, query selector, I even tried hard-coding the role and other attributes on the nav instead of relying on the programmatic method. I have also looked for a function that might be overriding mine.
Apparently, I needed to lengthen the duration of the setTimeout. Maybe because of the animations? I am not sure. This worked:
setTimeout(function(){
$("#menu-focus").focus();
},300);
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 page with multiple dropdowns like this:
<div class="btn-group">
<button class="btn">Please Select From List</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a tabindex="-1" href="#">Item I</a></li>
<li><a tabindex="-1" href="#">Item II</a></li>
<li><a tabindex="-1" href="#">Item III</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Other</a></li>
</ul>
</div>
I want to change the button text to selected element value. I've found this thread: How to Display Selected Item in Bootstrap Button Dropdown Title, which explains how to retrieve the text/value of selected item and change the text of the button, but there's a problem when there's more drop down menus on the page, the below script changes labels for all buttons present on the page:
$(function(){
$(".dropdown-menu li a").click(function(){
$(".btn:first-child").text($(this).text());
$(".btn:first-child").val($(this).text());
});
});
How to modify it so that it would only change the corresponding dropdown menu button?
As a side question: is there really no simple way of having <select> like behavior with dropdown menus out of the box in bootstrap?
You need to add specificity to your jQuery selector. Currently, you're selecting all elements with a .btn class that are the first child of their parent. What you want to do instead is get the current element's parent .btn-group then find the .btn:first-child inside of that. You can do that as follows:
$(function(){
$(".dropdown-menu li a").click(function(){
$(this).closest('.btn-group').find(".btn:first-child").text($(this).text());
$(this).closest('.btn-group').find(".btn:first-child").val($(this).text());
});
});
One of many potential solutions, transverse up the DOM to find the group it's in, and then target the button within the group.
$(function(){
$(".dropdown-menu li a").click(function(){
var target = $(this).closest('.btn-group').find('.btn:first-child')
target.text($(this).text());
target.val($(this).text());
});
});
I'll start with my JSFiddle example:
http://jsfiddle.net/CR5FB/5/
Basically I'm trying to get the same effect as shown on this post (JSFiddle here), however I'm having some trouble implementing it - being as I want to check for multiple div's toggle status rather than simply switching in between two divs. I have tried using the following:
$("#showcreate").click(function() {
if ($(".searchmenu").is(":visible")) {
$(".createmenu").toggle("fast");
$(".searchmenu").toggle("fast");
} else {
$(".createmenu").toggle("fast");
});
(So if the search menu is open, close it and open the create menu but if it's not open, just open the create menu).
I'm not sure if the :visible function applies if I've used $("div").hide() rather than display:none in the css?
Any help on this will be massively appreciated - even a suggestion for another suitable method such as possible jquery accordion etc.?
Thanks alot
Try this please:
HTML:
<div class="actionsmenu" id="actionsmenu">
<div id="navmenu">
<ul id="navmenu">
<li><a href='#' class="tog" data-id="createmenu" id='showcreate'>Create</a></li>
<li><a href='#' class="tog" data-id="searchmenu" id='showsearch'>Search</a></li>
<li><a href='#' class="tog" data-id="settingsmenu" id='showsettings'>Settings</a></li>
<li><a href='#' class="tog" data-id="helpmenu" id='showhelp'>Help</a></li>
<ul>
</div>
</div>
<div class="menu createmenu" id="createmenu">Menu 1</div>
<div class="menu searchmenu" id="searchmenu">Menu 2</div>
<div class="menu settingsmenu" id="settingsmenu">Menu 3</div>
<div class="menu helpmenu" id="helpmenu">
JS:
$(document).ready(function () {
$(".menu").hide();
$(".tog").click(function () {
$(".menu").hide();
$("." + $(this).data('id')).toggle("fast");
});
});
FIDDLE:
http://jsfiddle.net/CR5FB/14/
EDIT:
You have to use some common class for your links and divs if you want to assign them to the same event.
There is you can find better solution as for me: http://jsfiddle.net/CR5FB/19/
Here is a JS fiddle: http://jsfiddle.net/7nGYE/
What you need to do is keep track of the active menu with a CSS class, so when another menu is clicked, you toggle the active menu, remove it as active, then set the new menu as the active div.
In particular, on any menu item click:
$('ul#navmenu a').click(function() {
$('div.active').removeClass('active').toggle('fast');
});
Hide the active menu. Then, on a particular menu item click:
$("#showcreate").click(function () {
$(".createmenu").toggle("fast").addClass('active');
});
add the 'active' CSS class to keep track of it.
I'm trying to do a show / hide menu button using jQuery.
The menu is contained in a div, and I am trying to setup a button to show and hide it. Here's my code:
<div class="menu">
<div id="items">
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</div>
<p class="dismiss-btn" id="btn-hide"><i class="fa fa-bars"></i></p>
</div>
JS:
<script>
//DOM loaded
$(document).ready(function() {
// Hide the top info bar
$('#btn-hide').click(function(){
$("#items").toggle("slow");
});
});
</script>
The problem is when I click the button, it hides the content, and then it shows it again... Any idea where I'm wrong?
This works fine for me but one thing you could try:
$('#btn-hide').click(function(e){
e.stopImmediatePropagation();
$("#items").toggle("slow");
});
This will stop any other "clicks" on that element or parent elements.
http://api.jquery.com/event.stopimmediatepropagation/