All Bootstrap Dropdown menu examples show the items having an link like:
<li>a</li>
How can I make a Bootstrap dropdown menu where choosing an item triggers a javascript method?
(If it makes a difference, the menu items will also be added to the menu using javascript/jquery initially)
Is this just a matter of adding a click function to each <li>? Or does Bootstrap provide special handling for its dropdown items?
If I add a click function, do I still need each item to also have the <a href="#"> tag around the text?
Looks like the answer is:
Bootstrap does not supply any special handling for clicks on its
dropdown menu items; and
I could add a click function to each item in the list; or
I could use event delegation to add the click function to the list
itself, and it will be triggered on each child's click
Thanks to #Pevara and #spaceman for getting me rolling.
Related
I'd like to use SemanticUI to display different sidebars based on selected menu
I've tried one way, but it doesn't seem to work. Codepen link
Here, i have 2 menu items for the sidebar, i need to show 'first_sidebar' if i'm inside the menu 'First', if i'm inside 'Second', i need to show the 'second-sidebar'.
Thanks!
You are trying to show and hide sidebar as an ordinary HTML element with jQuery, using $("div.second_sidebar").hide() and $("div.first_sidebar").show().
But, since sidebars are Semantic UI element that you initialized with .sidebar() method, you should use this same method to show and hide sidebars, e.g.:
$("div.second_sidebar").sidebar('hide');
$("div.first_sidebar").sidebar('show');
Reference is here:
https://semantic-ui.com/modules/sidebar.html#/usage
I'm trying to nest a dropdown inside an element which already has a click event bound to it.
I have disabled bubbling on the dropdown and created a clickhandler to trigger it manually by calling $(...).dropdown()
When I try to trigger a dropdown the dropdown box requires two clicks at a minimum before it begins to work.
When you use $(...).dropdown('toggle') it works on the first click but after that the functionality is broken.
Here is a JSFiddle that exactly mimics my structure.
JSFiddle
Just add this function in your script it's work fine
$(document).ready(function() {
$(".dropdown-toggle").dropdown();
});
I update your jsfiddle click here
I am creating a menu and am using Javascript so when they click one of the menu options it greys out the other options and displays a sub-menu. My goal is to add an if statement within the function so that when they "mouse out" on both the sub-menu and the option that they clicked, the menu will return back to normal. Is it possible to have an if statement like so:
IF $("Menu2").bind('mouseout',____) AND $("Menu2Sub").bind('mouseout',____) then....
Just create a function which is responsible for graying out the other options and displaying the submenu and attach it as a mouseout event to the IDs like so:
$("#id").mouseout(function);
Set a flag on each Menu. When both flags have been triggered, perform the desired function:
the menu will return back to normal
I am using bootstrap-dropdown to generate a Dropdown menu.
I would like to disable some default behaviour by using jQuery.off.
1) how can I disable the disappear of Dropdown menu on a specific element and not all elements?
2) how can I disable the appearing of menu on a specific element and not all elements?
By using the following code I reach my goal by I would like to apply this behaviour on a specific element and not on all the document.
$('html').off('click.dropdown'); // it disable the disappear of Dropdown menu.
$('body').off('click.dropdown'); // it disable the appearing of Dropdown menu.
// Why this differance?
.
This is the jsfiddle link to test the code.
Thanks to #merv for making the jsfiddle.
You can only use the off() method to disable a binding on a specific element that already has a binding. In pointing out $('html').off(), I was merely trying to demonstrate that the only binding which auto-closes dropdown menus is attached there.
Otherwise, you can add a new binding to elements in dropdown menus to stop the click event from bubbling up to the html element:
$('.dropdown-menu').on('click.dropdown', function(e) {e.stopPropagation()})
JSFiddle
$(".disabled-link").click(function(event) {
event.preventDefault();
});
add the "disabled-link" class to any dropdown you don't want to work
I want to make an application making use of twitter's bootstrap framework. I have a navbar that functions like a File Menu bar with File/Edit/Help/etc.
I like the fact that you need to click to make the dropdown appear, however how can I make it where it will dropdown the Edit menu for instance when moving from the File menu (after it is clicked and dropped down).
An example of this is going to google docs, clicking one menu and then moving to another menu item it will dropdown the new hovered menu
My solution: for your <ul> element make two classes.
One for example doc-menu other normal-menu.
On menu item click: your <li> should get class="active" and <ul class="doc-menu".
Then show up inner <ul><li>....</ul> inside <li class="active"> and keep it up even if not hovered. On other doc-menu item hover you change the active class to other <li> element. This can be done by listening to mouseover using javascript. When clicked on background or inner <ul><li>....</ul> change <ul class="doc-menu"> to <ul class="normal-menu>