I'm working with Boostrap for the first time ever, please don't kill me :D
I have a problem with my navigation bar. I have 7 menus, each with a dropdown of its own. The problem is that when I click on a menu, they all dropdown at the same time, and I need only to dropdown the one I clicked on. My JS code is pretty rudimentary.
This is what I used so far:
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
And the HTML code is this, (example for one menu; each menu has a similar code):
<li class="dropdown">
Organizare <b class="caret"></b
<ul class="dropdown-menu">
<li>Conducere</li>
<li>Consiliu</li>
<li>Departamente</li>
<li>Administratie</li>
<li>Secretariat</li>
</ul>
</li>
What do I need to change so that only the menu I click on dropdown ?
Thanks!
Find the menu following the toggle:
$('.dropdown-toggle').click(function() {
$(this).next('.dropdown-menu').toggle();
});
Example: http://codepen.io/paulroub/pen/YXKzGm
If you have multiple menus, I prefer to use this:
$(document).ready(function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').slideUp();
$(this).next('dropdown-menu').slideDown();
);
});
The advantage to this is that it will close any other open dropdown menus and then open the one that has been clicked.
It can be further improved to check if the .dropdown-toggle that was clicked is currently open.
The issue is that the handler you're registering will select anything with the class dropdown-menu, then toggle it, because you've written:
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
As you say, you don't want to toggle everything with that class, you just want to toggle what was clicked, so you should use the event parameter from click() to find what's been clicked, and select the relevent dropdown-menu to toggle:
$('.dropdown-toggle').click(function(e) {
$(e.target).next('.dropdown-menu').toggle();
});
I was able to do it with this HTML
Dropdown 1<span class="caret"></span>
<ul class="dropdown-menu dd1" role="menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
Dropdown 2 <span class="caret"></span>
<ul class="dropdown-menu dd2" role="menu">
<li>Item 1</li>
<li>Item 2</li>
</ul>
and this jQuery:
$(".dropdown-toggle").click(function(e) {
$(this).next('.dropdown-menu').toggle();
});
NOTE:
just the the JS did not work for me.
data-toggle, bootstrap seems to use this to identify which <ul> to toggle based on class name.
used that in combination with Paul Roub's answer to override the default behavior.
Related
I have a dropdown menu that currently displays the dropdown unordered list on hover, which are lists of links. Hover is problematic for users and I want to change the to 'click' or 'toggle'. Here is the code currently in the site:
$("#main_nav .dropdown").hover(function() {
$('.dropdown-menu', this).fadeIn("fast");
$('.nav_main .mega-menu-column ul').attr("style", "display:flex; display: -ms-flexbox;");
$(this).addClass('active');
},
function()
{ $('.dropdown-menu', this).fadeOut("fast"); $(this).removeClass('active');
});
if I switch the .hover to .toggle the drop down menus work as I would expect them to. The problem is it now breaks my links. When I click on them they do nothing and go nowhere. Here is the HTML:
<ul class="nav_main">
<li class="active">Home</li>
<li class="dropdown">
Decisions <b class="caret"></b>
<ul class="dropdown-menu mega-menu" id="decisions">
<li class="mega-menu-column">
<ul>
<span>
<li>Our Decision on CanLII</li>
<li>SCC Decisions</li>
<li>Canada Supreme Court Reports (PDF)</li>
<li>vLex Canada Open</li>
<li>Sask Cases Judicially Considered</li>
</span>
<span>
<li>Federal Court</li>
<li>Quebec (translated decisions)</li>
<li>Tax Court of Canada</li>
</span>
<span>
<li class="list-heading">Tribunals</li>
<li>Automobile Injury Appeal Commission</li>
<li>Law Society of Saskatchewan</li>
<li>Labour Arbitration Awards – Sask</li>
<li>Sask LRB (CanLII)</li>
<li>Sask LRB</li>
</span>
</ul>
</li>
</ul>
Is there any easily explainable reason as to my this simple switch in code is causing the links to stop working completely?
Thanks in advance!
I was unable to precisely reproduce the issue with the code you provided, but I did observe issues clicking some of the links.
Removing the invalid span elements from the ul seems to have corrected the observed issue.
Try removing those span tags from the ul.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
Allowed child elements of ul
My guess would be that your .toggle is hijacking the click event for the whole container. So when you click a link it's toggling the menu rather than firing the default click for a link. You may try stopping propagation on the links, so it doesn't fire the click event on the parent menu:
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
I'm trying to select the content I click and this content has to be the first one to be selected. Like the select option.
This is the img.
I'm not quite sure how to make this, this is my demo: http://jsbin.com/jazej/1#0
Basically the part of the code is this.
<li class="dropdown">
Select Card <b class="caret"></b>
<ul class="dropdown-menu" id="indexCards">
<li class="active">Card 1</li>
<li class="">Card 2</li>
<li class="">Card 3</li>
<li class="">Card 4</li>
</ul>
</li>
But I can't get no event fire or something when I do $('#indexCards'). Any idea about this?
Try this : Read text of the clicked anchor inside indexCards and put it in selectCard
$(function(){
$('#indexCards li a').click(function(){
$('.active').removeClass('active');
$(this).closest('li').addClass('active');
var text = $(this).text();
$('#selectCard').html(text+'<b class="caret"></b>');
});
});
Ive got this dropdown styled with bootstrap:
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="posuvnik">15min <strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li> 15min </li>
<li> 1hod </li>
</ul>
</li>
and I want that dropdown menu to be rolled down on a page load, anyone know how to achieve that? thanks in advance :)
The dropdown is toggled with having the additional class 'open' added to the enclosing <li> element. So if you want to have it open on page loading:
<li class="dropdown open">
That will do the trick.
This little bit of jQuery script (I'm assuming you've loaded it becasue you're using Bootstrap) ought to do the trick. Once the DOM has loaded, it sends a click() to the dropdown toggle button.
$(document).ready(function () {
$("#posuvnik").click();
});
There is probably a way to do it in straight CSS, but without seeing more of your code it's hard to know.
I have a responsive menu, when viewing on PC on a hover the menu drops, on a tablet obviously you cant hover so on click I need the menu to drop. However the link is directing the user to the page on the click. I need to prevent the link from firing on a click (on a specific browser size) so it can open a dropdown menu
HTML
<ul class="mainMenu">
<li>
Page
<ul class="subMenu">
<li>Sub Page 1</li>
<li>Sub Page 2</li>
</ul>
</li>
<li>Another Page</li>
<li>Another Page</li>
<li>
Page
<ul class="subMenu">
<li>Sub Page 1</li>
<li>Sub Page 2</li>
</ul>
</li>
</ul>
This jQuery achieves the necessary hover and drop down
jQuery
if ($bWidth > 1025) {
$('.mainMenu > li').unbind().hover(function () {
$(this).find('.subMenu').stop().slideToggle(400);
});
} else {
$('.mainMenu > li').unbind().click(function () {
$(this).find('.subMenu').stop().slideToggle(400);
});
}
Closest Attempt
if ($bWidth > 1025) {
$('.mainMenu > li').unbind().hover(function () {
$(this).find('.subMenu').stop().slideToggle(400);
});
} else {
$('.mainMenu > li').unbind().click(function (e) {
e.preventDefault();
location.href = "javascript:void(0);";
$(this).find('.subMenu').stop().slideToggle(400);
return;
});
}
This attempt is the closest ive come, however it stops all the nav links from executing, ive been trying to target the parent A of the subMenu it will open and close all submenus instead of just the 1 the user is clicking. Any ideas?
you need to event.preventDefault() on the click. Also there is a nice tutorial here. preventDefault on an anchor tag will stop the href from firing. Also, what version of jquery are you using? I'd suggest using .on and .off instead of bind and unbind. Also, set the events to a better selector. $("parentSelector").on("event", "actual selector", function(){
});
see this demo
I have write my own document click function $(document).click(function(e) { to trace click and hide my custom build menu. However, when I clicked on Bootstrap standard drop down menu, my document click function is being skipped from running.
<li class="dropdown">
Settings <b class="caret"></b>
<ul class="dropdown-menu">
<li>My Account</li>
<li>Log Out</li>
</ul>
</li>
For better explanation, here is my sample code: http://jsfiddle.net/XwjE6/2/ As you can see if you clicked on "My Menu" and then click on "Settings", "My Menu" doesn't disappear.
How can I ensure my document click function is always listen click and execute code? So that I can get my menu to hide when user click on bootstrap menu. Thanks.