<ul class="dropdown-menu">
<li>Deutsch</li>
<li>Denmark</li>
I want to find out with jQuery what point of the dropdown menu was clicked.
I tried it so:
<ul class="dropdown-menu">
<li>Deutsch</li>
<li>Denmark</li>
jQuery:
$("#changeLanguage").click(function(){
alert($(this).attr("requestLanguage"));
});
But only the first dropdown point (german) calls the jQuery Event. Denmark has no function.
How I can realize it?
An id can only be used once on the page. Change them to a class like so:
HTML
<ul class="dropdown-menu">
<li>Deutsch</li>
<li>Denmark</li>
</ul>
JS
$(".changeLanguage").click(function(e){
e.preventDefault()
alert($(this).attr("requestLanguage"));
});
FIDDLE
Related
I have a navigation menu that I created using Bootstrap 3. The menu has two dropdowns. Here is how I want it to behave:
Click menu 1 > dropdown menu appears
Click menu 2 > menu 1 closes > menu 2 dropdown appears
Here is what is actually happening:
Click menu 1 > dropdown menu appears
Click menu 1 again to close it
Click menu 2 to open it
What I have tried:
There is a similar question here: Avoid having to double-click to toggle Bootstrap dropdown. The solutions seemed specific to using angular with bootstrap, but I tried them anyway. Here is what happened:
One solution mentions getting rid of bootstrap.min.js. That solution is for Bootstrap 4.
A second solution includes stopping default behavior of the dropdown this way:
$('.dropdown-toggle').click(function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
But if I add that, the dropdowns don't work at all. When I click them, nothing happens.
The last solution I tried included removing data-toggle="dropdown". That resulted in the dropdowns not showing up at all as well.
Question:
Does anyone have a solution for how to remove the double click functionality so that I don't have to double click to close one menu before I can open another? I am just using Bootstrap (not angular and bootstrap), and I am using Bootstrap 3.
My code:
Don't know if this is helpful, but here is my navigation bar code:
<nav>
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Option 1<span class="caret"></span></a>
<ul class="dropdown-menu" style="position:relative;width:100%;" id="option1menu">
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" >Option 2<span class="caret"></span></a>
<ul class="dropdown-menu" style="position:relative;width:100%;" id="option2menu">
<li>Link</li>
<li>Link</li>
</ul>
</li>
</ul>
</nav>
I am having difficulty trying to keep my drop-down menu open when i click on a sub menu. You would think that Bootstrap would do this right out the box. But i cant find any documentation on it.
here is what i found as a solution:
https://www.bootply.com/rgvY6oPO1J
In my HTML i have this:
<div class="btn-group" id="myDropdown">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Menu
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Choice1</li>
<li>Choice2</li>
<li>Numbers
<ul class="nav collapse" id="mynumbers" role="menu" aria-labelledby="btn-mynumbers">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>Choice3</li>
<li class="divider"></li>
<li>Choice..</li>
</ul>
</div>
And here is whats in my JavaScript:
$("#btn-mynumbers").on("click", function (e) {
e.stopPropagation();
$("#mynumbers").slideToggle("fast");
});
for the most part it works. But I'm going to have a lot of menu items and i don't want to make a on click caller for every sub-menu i create.
So i tried putting
onclick="Toggle(this);"
in
id="btn-mynumbers"
and creating the function:
function Toggle(element) {
event.stopPropagation();
var parentid = element.id;
var childid = $(parentid).children("ul").attr("id");
$(childid).slideToggle("fast");
}
so i can give every sub-menu click the ability to stay open. but the event stopped ALL propagation, even the slideToggle. I don't know how to keep the drop down open when a sub-menu slides down.
It seems like there was an error with the function you made since event would probably be undefined. I changed it to something like below. But you can see it in action with the codepen link below.
$(".submenu").on("click", function (event) {
event.stopPropagation();
var target = event.currentTarget;
$(target).siblings('ul').slideToggle("fast");
});
The best approach if you don't want to put an id for every possible menu item that has a sub-menu, then work with classes. That way you don't need to recode.
I made you a codepen that shows how to use classes instead of ids as identifiers. I added a sample of another menu item with a sub-menu for you to play around with.
Hope that helps!
I am working on a Grails project where I have this dropdown:
<li class="dropdown">
</span>
<ul class="dropdown-menu" role="menu">
<li>
<g:remoteLink controller="todo" action="getTodos" update="dynamic" method="GET" id="${category.id}" onSuccess="dynamics()">Ver
</g:remoteLink>
</li>
<li>Modificar</li>
<li><a>Eliminar</a></li>
</ul>
</li>
and this function on JS:
function dynamics(){
$("#dynamic").addClass("dynamicSet").removeClass("dynamicBefore");
$(".dropdown-toggle").dropdown();
}
The problem is: After the ajax call, the jscode $(".dropdown-toggle").dropdown(); the dropdown works normally but after performing another ajax call right after, the dropdown collapses and won't work unless I reload the whole page.
Anyone knows how to fix this problem
Thanks in advance.
As #Fernando recommened to implement my own ajax call instead of using <g:remotelink>, I changed my code to this:
<li class="dropdown">
</span>
<ul class="dropdown-menu" role="menu">
<li><a data-id="${category}" onclick="dynamics('${category.id}')" class="button">Ver
</a></li>
<li>Modificar</li>
<li><a>Eliminar</a></li>
</ul>
</li>
function dynamics(id){
$.get("<g:createLink controller='todo' action='getTodos' />", {"id":id}, function(respuesta){
$("#dynamic").addClass("dynamicSet").removeClass("dynamicBefore").html(respuesta)
;});
;}
The problem was that I had declared the function $(".dropdown-toggle").dropdown(); inside the function dynamics but after two ajax calls the boostrap drowdowns would not work, then I found the solution to this problem by declaring the mentioned function inside the $(document).ready(function() like this:
$(document).ready(function() {
$("#dynamic").addClass("dynamicBefore");
$(".dropdown-toggle").dropdown();
});
I'm trying to create a click event on a jQuery fly out menu. Once you hover to the 2nd or 3rd layer is where I need the event to take place.
I'm also new to jQuery so forgive me if the code isn't up to standards.
I have a sample here: http://jsbin.com/makoreficexe/1/edit
If I understood it right, you just want to have a click event inside the sub items of menu.
To do that, you need to find a way to identify the tag that was clicked, and there are a lot of ways.
I'll show you just 3 examples, but there are a lot...
1 - you can have a class for every tag that you want to click.
HTML - specifying a class
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a class="About" href="#">About This Template Here</a></li>
<li><a class="Flash" href="#">Flash</a></li>
<li><a class="Jquery" href="#">jQuery</a></li>
</ul>
</li>
Js
$(document).ready(function($) {
$(".About").click(function(){
alert("clicked")
}),
$(".Flash").click(function(){
alert("clicked")
})
});
The problem in this case is that is difficult to manage a lot of classes.
2 Using Id's
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li><a id="About" href="#">About This Template Here</a></li>
<li><a id="Flash" href="#">Flash</a></li>
<li><a id="Jquery" href="#">jQuery</a></li>
</ul>
</li>
JS
$(document).ready(function($) {
$("#About").click(function(){
alert("clicked")
}),
$("#Flash").click(function(){
alert("clicked")
})
});
The problem is that could be harder to manage a lot of ids as well. but i guess that is the better approach for your simple scenario
3 - You can get it using nth child. the problem is that if you change the structure of your html file, it can "break" your jquery selector.
$("#navList li:nth-child(2)").click(function(e){
alert(e);
})
Here is a list with a lot of types of jquery selector .
http://www.tutorialspoint.com/jquery/jquery-selectors.htm
Hope it helps.
$('.listTab a').click(function(e){...});
One approach would be to add "data" attributes to your a tags (http://api.jquery.com/data/).
For example, in the html for your first flyout:
<li><a data-whatever="This is in data-whatever" href="#">About This Template Here</a></li>
And in your jQuery ready bit, add this:
$('.listTab li a').click( function (e){
e.preventDefault(); // this prevents the href="#" in your a tag from firing
console.log($(this).data('whatever'));
});
You can then use the 'data-whatever' attribute in your click function to trigger what needs to happen.
http://jsbin.com/budoqizumuja/3/edit?html,css,js,console,output
Using Firebug I have found that the Dynatree plugin changes the following code:
<li id="id3.1" class="expanded">Menu 1
<ul>
<li id="id3.1.1">Sub-menu 1</li>
</ul>
</li>
To this:
<li class="">
<span class="dynatree-node dynatree-exp-c dynatree-ico-c">
<span class="dynatree-connector"></span>
<span class="dynatree-icon"></span>
<a class="dynatree-title" href="#">Sub-menu 1</a>
</span>
</li>
So when I try to make a click event on the id="id3.1.1" nothing happens because this id doesn't exist anymore.
I made a search here and found the onActivate option that will make my click happen on the menu:
$("#treeMenu").dynatree({
onActivate: function(node){
var menuTitle = node.data.title;
alert(menuTitle);
}
});
My question: Is this the only way to do the click event using Dynatree?
Well I think that is the best option, because it uses the API of the plugin, but of course you could still attach an event to the <a> like this:
$('a.dynatree-title').live('click', function(e){
//here e.target is the link you have clicked
});