I have an HTML parent-list named "sub-menu" and inside it there is a child list "sub-menu-real".
<li class="sub-menu">HIDE<span class="sub-arrows"></span>
<ul class="sub-menu-real">
<li class="sub-menu-l1">Hide Level 1</li>
<li class="sub-menu-l2">Hide Level 2</li>
<li class="sub-menu-l3">Hide Level 3</li>
<li class="sub-menu-l4">Hide Level 4</li>
</ul>
The problem is that when I use JQuery to define a callback function when the "sub-menu" is clicked, the callback function is called also when I click the children.
Here is the Jquery code:
$(document).ready(function(){
$(".sub-menu").click(function(){
callbackFunction();
});
$(".sub-menu-l1").click(function(){});
$(".sub-menu-l2").click(function(){});
$(".sub-menu-l3").click(function(){});
$(".sub-menu-l4").click(function(){});
Here I just call the callBackFunction inside the .sub-menu class but it is called when I click sub-menu children.
How can I avoid this problem ?
You want to stop event bubbling when triggering a click event on the children.
Something like this:
$(".sub-menu").click(function() {
callbackFunction();
});
$('.sub-menu-l1,.sub-menu-l2,.sub-menu-l3,.sub-menu-l4').click(function(e) {
e.stopPropagation();
});
You have added an EventListener to the wrapping <li> element with the class of sub-menu. As long as your children are wrapped into that element, the click handler will be called by clicking on the element (and those children are part of that element).
So if you want to get rid of this behaviour you need to remove that listener:
$(".sub-menu").click(function(){
callbackFunction();
});
Otherwise every click on an element inside of .sub-menu will call that click handler.
e.stopPropagation() can be used on child elements . Hope this helps
$(".sub-menu").click(function(e){
callbackFunction();
});
$(".sub-menu-real li").click(function(e) {
e.stopPropagation();
});
function callbackFunction()
{
alert(1)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<li class="sub-menu">HIDE<span class="sub-arrows"></span>
<ul class="sub-menu-real">
<li class="sub-menu-l1">Hide Level 1</li>
<li class="sub-menu-l2">Hide Level 2</li>
<li class="sub-menu-l3">Hide Level 3</li>
<li class="sub-menu-l4">Hide Level 4</li>
</ul>
Use the a element as trigger for the click event:
$(".sub-menu-click > a").click(function(e){
callbackFunction();
});
Related
I would like to add a functionality to the original jQuery Sortable Connect List example at: http://jqueryui.com/sortable/#connect-lists
Since my second list (#sortable2) is kind of large... I would like to be able to scroll the page down and once I found the item that I need to select/move... just Double.Click on it in order to move it to the other list.
I need to move the items (li) from #sortable2 to #sortable1 as well as from #sortable1 to #sortable2. The idea is just to Double-Click and not Dragging.
THANKS!
Your html
<ul id="sortable1" class="sortable_list connectedSortable">
<li class="ui-state-default">sortable1 Item 1</li>
<li class="ui-state-default">sortable1 Item 2</li>
</ul>
<ul id="sortable2" class="sortable_list connectedSortable">
<li class="ui-state-default">sortable2 Item 1</li>
<li class="ui-state-default">sortable2 Item 2</li>
</ul>
Only from id = sortable2 you will have the items appended to sortable1 with li.class = ui-state-default. This adds one li item at a time from sortable2 to sortable1 .
script
//attach on load
$(function() {
$("#sortable2 .ui-state-default").dblclick(function(){
$("#sortable1").append(this);
});
});
$(function() {
$("ul li").dblclick(function(){
var parentID = $(this).parent().attr('id'); //sortable1 or sortable2
if(parentID.match(/^(sortable1)$/g))
$("#sortable2").append(this);
else if(parentID.match(/^(sortable2)$/g))
$("#sortable1").append(this);
});
});
I have searched a lot for adding active class to the parent menu using javascript.
I found many more examples but not a single one is working for me, below is my code
HTML
<div id="menu1" class="hmenu">
<ul>
<li>Item1
<ul>
<li>SubItem1
<ul>
<li>SubSubItem1</li>
<li>SubSubItem2</li>
</ul>
</li>
<li>SubItem2 </li>
<li>SubItem3
<ul>
<li>SubSubItem1</li>
<li>SubSubItem2</li>
</ul>
</li>
</ul>
</li>
<li>Item2</li>
<li>Item3
<ul>
<li>SubItem1
<ul>
<li>SubSubItem1</li>
<li>SubSubItem2</li>
</ul>
</li>
</ul>
</li>
</ul>
<br style="clear: left" />
</div>
My requirement is when i click on SubItem1 then both Item1 and SubItem1 should be active.
And when i click on SubSubItem1 then SubSubItem1 ,SubItem1 and Item1 should be active.
Means when click on any link then its all parent link and the same link should be active.
I have tried with this javascript code :
$(document).ready(function () {
$('.hmenu ul li ul').find('li').click(function () {
//removing the previous selected menu state
$('.hmenu').find('li.active').removeClass('active');
//adding the state for this parent menu
$(this).parents('li').addClass('active');
});
});
Actually i don't have any experience with javascript coding and unable to figure out the problem in my code.
Can anyone suggest me for the same.
The issue comes from .find('li').click().
As you use nestsed <li>, this will cause the event to be fired two times when you click on a child <li>. This causes problems. Can not you add the click() to <a> elements?
$(document).ready(function () {
$('.hmenu a').click(function () {
//removing the previous selected menu state
$('.hmenu').find('li.active').removeClass('active');
//adding the state for this parent menu
$(this).parents("li").addClass('active');
});
});
It works just fine: https://jsfiddle.net/6put8tdx/
Note that your page will be bumped to the top while clicking to a tab because of # anchor. If you want to prevent this, you may pass the event to the function .click(function (event) {...} and add event.preventDefault inside.
If you need the click target to be the LI element (as opposed to Delgan's answer)
you can use .not() over the targeted LI's parents to prevent messing with the bubbling event targets:
$(document).ready(function () {
$('.hmenu').find('li').click(function(event) {
event.preventDefault(); // Prevent page jumps due to anchors
var $par = $(event.target).parents("li"); // get list of parents
$(".hmenu .active").not( $par ).removeClass("active"); // not them
$(this).addClass('active'); // let the event propagation do the work
});
});
$(document).ready(function () {
$('.hmenu').find('li').click(function(event) {
event.preventDefault();
var $par = $(event.target).parents("li");
$(".hmenu .active").not($par).removeClass("active");
$(this).addClass('active');
});
});
.active > a{
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu1" class="hmenu">
<ul>
<li>Item1
<ul>
<li>SubItem1
<ul>
<li>SubSubItem1</li>
<li>SubSubItem2</li>
</ul>
</li>
<li>SubItem2 </li>
<li>SubItem3
<ul>
<li>SubSubItem1</li>
<li>SubSubItem2</li>
</ul>
</li>
</ul>
</li>
<li>Item2</li>
<li>Item3
<ul>
<li>SubItem1
<ul>
<li>SubSubItem1</li>
<li>SubSubItem2</li>
</ul>
</li>
</ul>
</li>
</ul>
<br style="clear: left" />
</div>
To better understand the above
The following example works out-of-the-box, and the clicked one and all it's LI parents get the "active" class.
Why? Cause the event target is li, means any li of .hmenu - so that click is attached to any of them, and clicking the subsub LI the event will propagate to the LI parents - triggering the same click behavior (this add class)!
$(".hmenu").on("click", "li", function(){
$(this).addClass("active"); // Wow! Event propagation rulez!!
});
But we need to remove existing .active and here it gets messy...
$(".hmenu").on("click", "li", function(){
$(".active").removeClass("active"); // triggered on every event bubble :(
$(this).addClass("active"); // leaving only the main parent with active class
});
That's caused by the concurrency that happens while the event bubbles and triggers the same actions for the parent elements.
One way to prevent that concurrency would be using a setTimeout of 1ms:
$(".hmenu").on("click", "li", function(){
$(".active").removeClass("active");
setTimeout(function(){ // Let the previous finish the bubbling mess
$(this).addClass("active"); // Yey! all fine! Every LI has the active class
}, 1);
});
But here the timeout of 1ms can lead to visual "blinking" issues.
Try this:
$(function () {
$("li a")
.on("click", function () {
$(this).toggleClass("active");
$(this).closest("ul").parent().children("li a").toggleClass("active")
.parent().parent().parent().children("li a").toggleClass("active");
});
});
fiddle
Traverse from the clicked element. And use toggleClass() to avoid the mundane checking if hasclass removeClass ...
I have a submenu like below:
<ul id="main-menu" class="" style="">
<li class="root-level has-sub">
Menu 1
<ul>
<li>Sub-menu 1</li>
<li>Sub-menu 2</li>
</ul>
</li>
<li>Menu 2</li>
<li class="root-level has-sub"> <!-- here -->
Menu 3
<ul>
<li class="root-level has-sub"> <!-- add class 'opened' here and -->
Sub-menu 3
<ul>
<li>Sub-sub-Menu 1</li> <!-- this -->
<li>Sub-sub-Menu 2</li> <!-- when user click this or -->
</ul>
</li>
</ul>
</li>
What I would like to have is, when I click to the child, it will add 'opened' class to parent and highlight the clicked element. My code only success on Menu 1 and failed on Menu 3.
Notice that, in Menu 3, there are 2 parents for Sub-sub-Menu 1 and Sub-sub-Menu 2. So my question is, if i click on Sub-sub-Menu 1 or Sub-sub-Menu 2 it will highlight and add 'opened' class to 2 parents li above.
Note: I try to implement unlimited level of menu
Here is my full code Fiddle
I think you should use a different selector(for the click event). Look for all li>a pairs, corresponding to the submenu items, inside your #main-menu list
$('#main-menu li>a').click(function (e) {
e.preventDefault();
$('.active').removeClass('active');
$('.opened').removeClass('opened');
$(this).parent('li').addClass('active').parents('.root-level').addClass('opened');
//------------------------------------------------------^-----------------------------
// selects all parents with the 'root-level' class
});
Modifying the css to:
#main-menu .active {
background-color:#df0000;
color:#fff;
}
DEMO
you simply use the not: attribute in your closest() method to exclude all classes root-level
$(function () {
$('ul#main-menu li ul li').click(function (e) {
e.preventDefault();
//we search for the first ancestor of this which is a li
$(this).closest('li:not(".root-level")').addClass('active').siblings().removeClass('active');
$('.active:first').closest('ul').addClass('opened');
});
});
check the link http://jsfiddle.net/GEj4z/11/
If I understood correctly what was desired was being able to produce a menu like behavior and it is because of that I would like to present an alternate solution:
Sample Fiddle
$('#main-menu').on('click','li:not(.root-level)',function(e){
$('.parent').removeClass('parent');
$('.selected').removeClass('selected');
$(this).parents('li.root-level').children('a').addClass('parent');
$(this).children('a').addClass('selected');
});
In this solution the parent menus are highlighted and the clicked item is marked as selected again I wanted to share my POV of this problem. I hope it helps.
Inside your click event use $(this).parents('li') to get the top level parent li of the clicked element. I hope this helps.
I found the solution! my jquery is:
$(function () {
$('ul#main-menu li ul li').click(function (e) {
e.preventDefault();
$(this).closest('li:not(".root-level")').addClass('active').siblings().removeClass('active');
$(this).parents('li').addClass('opened');
$(this).closest('li:has(".root-level")').removeClass('active');
});
});
Here is my full code JSFiddle
I am having some issues figure out how i can just remove a class ="active" from a just one of my lists.
I have a navigation bar:
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
I also have a menu within Home:
<div class="container_2">
<ul>
<li class="left-main-list active">Subject 1</li>
<ul class="list-in-list">
<li>Sub subject 1</li>
<li>Sub subject 2</li>
</ul>
<li class="left-main-list>Subject 2</li>
<li class="left-main-list>Subject 3</li>
</ul>
</div>
While i browse my menu on the home page, i want to change the the active list items class to active when clicked, so i now have this jQuery code:
$(document).ready(function() {
$('li').click(function() {
$('li').removeClass('active');
$(this).addClass('active');
});
});
This works for my menu, the class change to the current one, but it also delete my navigation bars class, which i don't want. :)
I have tried something like:
$(document).ready(function() {
$('.left-main-list').click(function() {
$('.left-main-list li').removeClass('active');
$(this).addClass('active');
});
});
I've tried '.left-main-list li' & 'li.left-main-list' without any success.
Greatful for answer to this question, and i hope my question (this time) is more accurate than my previous ones. :)
/Bill
ps: Can a sub subject AND a main subject be active at the same time, and that sub subject's class of active, be removed if you for example click another sub subject, but the main item still have it's class of active?
While i browse my menu on the home page, i want to change the the
active list items class to active when clicked
You could just target the lis within the relevant div, similar to this:
$(document).ready(function() {
var $listItems = $('div.container_2 li');
$listItems.click(function() {
$listItems.removeClass('active');
$(this).addClass('active');
});
});
DEMO - target lis within .container_2 only
Can a sub subject AND a main subject be active at the same time, and
that sub subject's class of active, be removed if you for example
click another sub subject, but the main item still have it's class of
active?
Still targeting the container you could use jQuery's parent(), similar to this:
$(document).ready(function () {
$('div.container_2 li').click(function () {
var $this = $(this);
var $children = $this.parent().find('li');
$children.removeClass('active');
$this.addClass('active');
});
});
DEMO - Using parent() to allow active menu and sub-menu but not when main menu changes
I looked at the possibility of making this more dynamic to add activation of items going up the chain when switching between sub menus located within different main menu elements.
Fixing the HTML of the nested uls whereby your nested uls are inside lis instead of just inside the upper ul you can do a fully dynamic implementation.
Assume your HTML like this:
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="container_2">
<ul>
<li class="left-main-list active">Subject 1
</li>
<li>
<ul class="list-in-list">
<li>Sub subject 1
</li>
<li>Sub subject 2
</li>
<li>
<ul class="list-in-list">
<li>Sub subject 1
</li>
<li>Sub subject 2
</li>
</ul>
</li>
</ul>
</li>
<li class="left-main-list">Subject 2
</li>
<li class="left-main-list">Subject 3
</li>
</ul>
</div>
Now, using the following script, you can also make parents of any sub menu items active when changing from a sub menu to another which is within another main menu item, similar to this:
$(document).ready(function () {
$('div.container_2 li>a').click(function () {
var $this = $(this);
var $relatedElements = $this.parents('ul').find('li');
if($this.hasClass('active')){
return;
}
$relatedElements.removeClass('active');
$this.parent('li').addClass('active');
var $parents = $this.parents('li');
$parents.each(function(){
$(this).not($this.parent()).prev().addClass('active');
});
});
});
DEMO - Chain-like activation
I think this should have all possible examples to get you started from here.
Hope this helps.
Try this:
$("li").click(function() {
$(this.parentNode).children("li").removeClass("active");
$(this).addClass("active");
});
This will affect only the siblings of the element you click on.
$('.left-main-list').click(function() {
$('.left-main-list').removeClass('active');
$(this).addClass('active');
});
I think what you're looking for is this:
$(document).ready(function() {
$('li').click(function() {
$('li.left-main-list').removeClass('active');
$(this).addClass('active');
});
});
How about
$('li').on ('click', function (){
$(this).addClass ('active').siblings ('li').removeClass ('active');
})
I plan to apply a custom show/hide effect on link, such that when a user hovers on a link, a different link appears in its place. I'm not so good in javascript and here is what I was trying:
<div id="nav">
<li id="a1">hover link 1</li>
<li id="a2">show link 1</li>
<li id="b1">hover link 2</li>
<li id="b2">show link 2</li>
<li id="c1">hover link 3</li>
<li id="c2">show link 3</li>
</div>
The javascript:
$("#nav a.li").hover(function () {
(this.id.charAt(0)+"1").hide();
});
Here is the fiddle
You missed $ and need to add # befor id your also need to change selector as you do not have anchor with class li
Change
(this.id.charAt(0)+"1").hide();
to
$('#' +this.id.charAt(0)+"1").hide();
Your code would be
Live Demo
$("#nav a li").hover(function () {
$('#'+ this.id.charAt(0)+"1").hide();
});
Edit If you want to remove the item being hovered then use $(this)
Live Demo
$("#nav a li").hover(function () {
$(this).hide();
});