I have built an expandable, nested menu in <ul> <li> <ul> <li> style in HTML. Both, the upper and lower <li>s have an onCLick attribute. when clicking on the lower (nested) li, the upper li should not trigger onClick or at least submit to the handler, that it was activated indirectly.
How do I achieve this?
I think this will help you:
$(document).ready(function(){
$(".header").click(function(){
$(this).children(".children").toggle();
});
$(".header a").click(function(e) {
e.stopPropagation();
});
});
If it dont: Send me a message
Related
I have a horizontal menu. This sub menu is displayed outside the ul. When i hover on a specific class, I want the .sub_menu to appear. When I hover the .sub_menu, I want it to be still there.
However, when moving my mouse from to the .sub_menu, it disappears.
jQuery(document).on('click', '.mobile-sub-menu-controller', function () {
jQuery(this).siblings('.sub-menu').slideFadeToggle();
if (jQuery(this).find('i').hasClass('icon-angle-down')) {
jQuery(this).find('i').removeClass('icon-angle-down');
jQuery(this).find('i').addClass('icon-angle-up');
} else {
jQuery(this).find('i').removeClass('icon-angle-up');
jQuery(this).find('i').addClass('icon-angle-down');
}
});
In
jQuery(document).on('click', '.mobile-sub-menu-controller', function () { ..
change click to 'mouseenter', because 'mouseover' will trigger the event for every movement unit the cursor moves across the target.
I think that you can attach watcher for both elements (menu item and submenu) and decide with class you should use in both watchers.
However, is your menu has the structure like this:
<ul>
<li><i>icon<i> Text
<ul>
...
</ul>
</li>
<li><i>icon<i> Text
<ul>
...
</ul>
</li>
...
<ul>
You can use css or mouseenter/mouseleave events to toggle the menu item class to show submenu.
Be careful, if there is a gap between menu item and submenu your css or js will work incorrectly because mouse will leave menu item to the another element but not to the submenu.
If you have some additional information or questions let me know.
Also you may attach your menu html code to clarify the question.
This seems like a simple issue but it is frustrating me. I want to be able to click multiple items in a dropdown list that contains checkboxes without collapsing the list. I've tried a variety of event handlers on the ul, li, and a elements with no luck. These include e.preventDefault(), e.stopPropogation(), and preventing the closing of the ul through the 'hide.bs.dropdown' event as per this answer.
My list items:
<li class="serviceListItem">
<a class="serviceListItemLink">
<input class="checkService" type="checkbox" value="">
</a>
</li>
and my current set of event handlers. I've tried most combinations of these.
$('#serviceDropdown').on('hide.bs.dropdown', function() {
return false;
});
$('.serviceListItemLink').click(function(e) {
console.log('you clicked a service');
e.stopPropogation();
e.preventDefault();
});
$('.serviceListItem').click(function(e) {
e.stopPropogation();
e.preventDefault();
});
I should add my UL has the #servicesDropdown ID. Thanks for all your help in advance SO.
Is that the code you have tried? In that case, you have misspelled "propagation".
It should be:
e.stopPropagation();
...and not:
e.stopPropogation();
I have small dropdown profile menu with logout button etc. I need to show the menu when I click on the button and hide it when i click anywhere on page or on the button as well.
<div id='menu'>
<ul>
<li class='has-sub'> <a class="testbutton" id="userButton" onclick="dropdown()" href="#">
<span id="buttonText">User name</span> <span id="triangleDown">▾</span>
</a>
<ul id="submenu">
<li class='has-sub'><a href='#'><span>Change password</span></a>
</li>
<li class='has-sub'><a href='logout.php?action=0'><span>Logout</span></a>
</li>
</ul>
</li>
</ul>
</div>
I used JavaScript. At this time menu is displayed on hidded only when I click on profile button. I also know how to start function using something like document.ready.
My not working code:
function dropdown() {
if ($('#submenu').css('visibility') == 'hidden') {
$('#submenu').css('visibility', 'visible');
} else {
$('#submenu').css('visibility', 'hidden');
}
};
$(document).click(function (event) {
if ($('#submenu').css('visibility') == 'visible') {
$('#submenu').css('visibility', 'hidden');
}
});
But when I combine this methods it does not works. So when I clicked on the button to open menu, nothing happened.
Sorry for my English :)
Thanks for help in advance.
This has partly to do with something called event propagation. Put simply, this means that click events will register not only on the clicked element, but also on any parent or ancestor elements of that element.
So if you click a DIV, the event will also be registered on the BODY, because the DIV is inside the BODY. Put abstractly, if a kitchen is the scene of a crime, then the apartment that houses that kitchen is also the scene of a crime. One is inside the other.
This is prevented by preventing propagation - in jQuery, by running the stopPropagation() method of the evt object that is automatically passed to your event handler.
In any case, your situation can be greatly simplified.
var menu = $('#menu'), but = $('#menu_button');
$(document).on('click', '*', function(evt) {
evt.stopPropagation(); //<-- stop the event propagating to ancestral elements
if ($(this).is(but)) //<-- on button click, toggle visibility of menu
menu.toggle();
else if (!$(this).closest(menu).length) //<-- on click outside, hide menu
menu.hide();
});
Assumption: I have assumed that the toggler button is targetable via the selector '#menu_button'. Update this as required. Also, the code should run inside a DOM-ready handler.
The code listens for clicks to any element. If it's registered on the button, the visible state of the menu is toggled. If it's to an element outside of the menu, the menu is hidden. (If, in the latter case, the menu is already hidden, this will have no effect.)
Here's a working JS Fiddle that demonstrates the approach.
Try this:
$(function() {
$('.test-button').click(function(event) {
event.stopPropagation();
$('#submenu').toggle();
});
$('body').click(function() {
var submenu = $('#submenu');
if(submenu.is(":visible")) {
submenu.hide();
}
})
});
I have a checkbox inside an <li> as apart of a menu. The wrapping item has a click handler which toggles the checkbox (to be consistent with the feel of the menu as whole). The problem is if the user clicks directly on the checkbox it will do its default toggle, and then the outer handler also toggles it. How can I prevent this double-toggle?
<li onclick='/*toggle checkbox*/'><input type='checkbox'/>...</li>
I've tried disabled but that alters the rendering, which I don't want.
I'm using jquery in case there is a feature there which helps.
You can use the .stopPropagation() function to prevent the click from propagation up the DOM tree.
Here's an example
$(document).ready(function () {
$("input[type=checkbox]").click(function (evt) {
evt.stopPropagation();
$("#thetext").html("checbox clicked");
});
$("li").click(function () {
$("#thetext").html("li clicked");
});
});
html
<ul>
<li>
<input type='checkbox' />
</li>
</ul>
<div id="thetext">hm</div>
Here is jQuery method for this http://api.jquery.com/event.stopPropagation/
I am trying to find some child a elements within a ul parent. But, I need to only find the first a. Here is what I am using
$('div.item a').click(function() {
$(this).parent().next('ul.subItems').find('a:first').addClass('selected');
});
HTML:
<div class="item"><a id="main5830" href="http://www.mysite.com">Test</a></div>
<ul class="subItems">
<li><a>test 1</a></li>
<li><a>test 2</a></li>
<li><a>test 3</a></li>
</ul>
I would like test 1's a element to get the class of selected.
For some reason, this is not selecting the first a within in the UL, or ANYTHING in the UL element. Have I done something wrong here?
It does work, just need to use return false; (or event.preventDefault();) at the end of the click event handler to prevent the anchor default click behaviour.
$('div.item a').click(function() {
$(this).parent().next('ul.subItems').find('a:first').addClass('selected');
return false;
});
or
$('div.item a').click(function(e) {
e.preventDefault();
$(this).parent().next('ul.subItems').find('a:first').addClass('selected');
});
Here's a Working Demo showing it working