I have this code. When I click on any li element then the first alert it shows its value, then show its parent then again that parent and so on. I just want to show the text of the clicked li element. How can I do that?
$('#container li').on('click', function() {
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<ul class="xyz">
<li>Grand Parent 1</li>
<li>
<ul class="xyz">
<li>Parent 1</li>
<li>Parent 2
<ul class="xyz">
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
<li>Child 4</li>
</ul>
</li>
<li>Parent 3</li>
<li>Parent 4</li>
</ul>
</li>
</ul>
</div>
Your first issue is that you need to stop the proprgation of the event from the clicked li to the parent li elements. You can call stopPropagation on the passed event handler to do that.
Secondly, I assume you only want to retrieve the child text value of the li, not the text of it's descendants, in which case you would need to use contents()[0] to access it. Try this:
$('#container li').on('click', function(e) {
e.stopPropagation();
var text = $(this).contents()[0].nodeValue.trim();
console.log(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<ul class="xyz">
<li>Grand Parent 1</li>
<li>
<ul class="xyz">
<li>Parent 1</li>
<li>
Parent 2
<ul class="xyz">
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
<li>Child 4</li>
</ul>
</li>
<li>Parent 3</li>
<li>Parent 4</li>
</ul>
</li>
</ul>
</div>
Related
<li class="cate-item">
<button class="cate-label" >item 1 </button>
<ul class="sub-categ">
<li> sub item 1</li>
<li> sub item 2</li>
<li> sub item 3</li>
<li> sub item 4</li>
</ul>
</li>
<li class="cate-item">
<button class="cate-label" >item 2 </button>
<ul class="sub-categ">
<li> sub item 1</li>
<li> sub item 2</li>
<li> sub item 3</li>
<li> sub item 4</li>
</ul>
</li>
This li item is generated dynamically I want to toggle li on the cate-label button click. for that, I did the following code
$(document).on("click", "#categoryList > li .cate-label", function () {
var currentItem = $(this).closest("li");
ItemToHide = $("#categoryList > li").not(currentItem);
ItemToHide.removeClass("active-item");
ItemToHide.find(".sub-cate").hide();
currentItem.toggleClass("active-item");
}
);
when I try to hide item using ItemToHide.find(".sub-cate").hide(); it didn't hide anything . I tried to find the length of the item using ItemToHide.find(".sub-cate").length but it returned 0.
Lower your event handling to something closer. I wrapped everything in a <menu> tag and registered the click event to it instead of document. It doesn't make much of a difference performance wise but I suggest it because it's looks as if your perspective is skewed if dealing with a larger view of the DOM and you'll be error prone:
var currentItem = $(this).closest("li");
ItemToHide = $("#categoryList > li").not(currentItem);
ItemToHide.removeClass("active-item");
ItemToHide.find(".sub-cate").hide();
currentItem.toggleClass("active-item");
That nightmare is now:
$(this).next('.sub-categ').toggle('ease-out');
$('menu').on("click", ".cate-label", toggleList);
function toggleList(e) {
$(this).next('.sub-categ').toggle('ease-out');
};
<menu>
<li class="cate-item">
<button class="cate-label">item 1 </button>
<ul class="sub-categ">
<li> sub item 1</li>
<li> sub item 2</li>
<li> sub item 3</li>
<li> sub item 4</li>
</ul>
</li>
<li class="cate-item">
<button class="cate-label">item 2 </button>
<ul class="sub-categ">
<li> sub item 1</li>
<li> sub item 2</li>
<li> sub item 3</li>
<li> sub item 4</li>
</ul>
</li>
</menu>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Actually, the name of the class is not correct. Should be 'sub-cate', not 'sub-categ'.
$(document).on("click", "#categoryList > li .cate-label", function () {
var currentItem = $(this).closest("li");
ItemToHide = $("#categoryList > li").not(currentItem);
ItemToHide.removeClass("active-item");
ItemToHide.find(".sub-cate").hide();
currentItem.toggleClass("active-item");
});
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div id="categoryList">
<li class="cate-item">
<button class="cate-label" >item 1 </button>
<ul class="sub-cate"><!--rename the class name-->
<li> sub item 1</li>
<li> sub item 2</li>
<li> sub item 3</li>
<li> sub item 4</li>
</ul>
</li>
<li class="cate-item">
<button class="cate-label" >item 2 </button>
<ul class="sub-cate"><!--rename the class name-->
<li> sub item 1</li>
<li> sub item 2</li>
<li> sub item 3</li>
<li> sub item 4</li>
</ul>
</li>
</div>
I'm trying to make a simple accordion menu
When you click on the menu the submenus are shown:
When you click "A" or "B" or "C", your respective submenu will be displayed
If the submenu of the letter is open, the only way to close it is to click on the letter again
did not get the way to just apply the jquery to the clicked class
https://jsfiddle.net/mafervemg/g0rb9xL1/
$(document).ready(function () {
$(".submenu").slideDown(); // open web there all submenu close
$(".UP").click(function () {
$(".submenu").slideUp();
});
$(".DOWN").click(function () {
$(".submenu").slideDown();
});
});
<p class="UP"> Click Here For Closet Sub Menu</p>
<p class="DOWN">Click Here For Open</p>
<ul class="menu">
<li>A</li>
<li>
<ul class="submenu">
<li>a 1</li>
<li>a 2</li>
<li>a 3</li>
<li>a 4</li>
</ul>
</li>
<li>B</li>
<li>
<ul class="submenu">
<li>b 1</li>
<li>b 2</li>
<li>b 3</li>
<li>b 4</li>
</ul>
</li>
<li>C</li>
<li>
<ul class="submenu">
<li>c 1</li>
<li>c 2</li>
<li>c 3</li>
<li>c 4</li>
</ul>
</li>
</ul>
You need to change a bit in your html and js
Have a look at Js below:
$(document).ready(function () {
$("submenu").slideDown(); // open web there all submenu close
$(".toggle").addClass('open');
$(".UP").click(function () {
$(".submenu").slideUp();
$(".toggle").removeClass('open');
});
$(".toggle").click(function(){
if($(this).hasClass("open")){
$(this).parent().find(".submenu").slideUp();
} else {
$(this).parent().find(".submenu").slideDown();
}
$(this).toggleClass('open');
})
$(".DOWN").click(function () {
$(".submenu").slideDown();
$(".toggle").addClass('open');
});
});
and change html
<p class="UP"> Click Here For Closet Sub Menu</p>
<p class="DOWN">Click Here For Open</p>
<ul class="menu">
<li><a href="#" class='toggle'>A</a>
<ul class="submenu">
<li>a 1</li>
<li>a 2</li>
<li>a 3</li>
<li>a 4</li>
</ul>
</li>
<li><a href="#" class='toggle'>B</a> <ul class="submenu">
<li>b 1</li>
<li>b 2</li>
<li>b 3</li>
<li>b 4</li>
</ul></li>
<li><a href="#" class='toggle'>C</a> <ul class="submenu">
<li>c 1</li>
<li>c 2</li>
<li>c 3</li>
<li>c 4</li>
</ul></li>
</ul>
Error:$ is not defined is because jQuery has not been included properly
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
I slightly changed your code, Hope you can understand
$(document).ready(function() {
$("submenu").slideDown(); // open web there all submenu close
$('.toggle-menu').addClass('opened');
$(".UP").click(function() {
$(".submenu").slideUp();
$('.toggle-menu').removeClass('opened').addClass('closed');
});
$(".DOWN").click(function() {
$(".submenu").slideDown();
$('.toggle-menu').removeClass('closed').addClass('opened');
});
$('.toggle-menu').click(function() {
if ($(this).hasClass('opened')) $(this).removeClass('opened').addClass('closed').siblings('.submenu').slideUp();
else $(this).removeClass('closed').addClass('opened').siblings('.submenu').slideDown();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="UP"> Click Here For Closet Sub Menu</p>
<p class="DOWN">Click Here For Open</p>
<ul class="menu">
<li>
A
<ul class="submenu">
<li>a 1</li>
<li>a 2</li>
<li>a 3</li>
<li>a 4</li>
</ul>
</li>
<li>
B
<ul class="submenu">
<li>b 1</li>
<li>b 2</li>
<li>b 3</li>
<li>b 4</li>
</ul>
</li>
<li>
C
<ul class="submenu">
<li>c 1</li>
<li>c 2</li>
<li>c 3</li>
<li>c 4</li>
</ul>
</li>
</ul>
I´m having a problem with a Submenu.
I can SHOW the submenu (when I click on the Menu or Li > Text). For example, Show submenu when I click on ONE
Also, close the other submenu if the person click on other Menu (Li > Text). For example, if the submenu of ONE is open and I click on Two, the submenu of One gets closed.
But I can´t toggle with my current code to open/close the submenu. For example, if I click on One it shows the Submenu. But I want that If I click again on One, close the Submenu.
Anyone can help me?
Here is my code
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".menu .expanded .menu ").hide();
$("li:has(ul)").click(function() {
$(".menu .expanded .menu ").hide();
$("ul", this).toggle('fast');
});
});
</script>
</head>
<body>
<ul class="menu">
<li class="expanded">One
<ul class="menu">
<li>One 1</li>
<li>One 2</li>
<li>One 3</li>
<li>One 4</li>
</ul>
</li>
<li class="expanded">Two
<ul class="menu">
<li>Two 1</li>
<li>Two 2</li>
<li>Two 3</li>
<li>Two 4</li>
</ul>
</li>
<li class="expanded">Three
<ul class="menu">
<li>Three 1</li>
<li>Three 2</li>
<li>Three 3</li>
<li>Three 4</li>
</ul>
</li>
</ul>
</body>
Thanks a lot! I am new :D
I only removed one line :
$(".menu .expanded .menu ").hide();
You can check if its the expected behavior in my snippet
$(document).ready(function() {
var previousTarget = null;
$("ul", "li").toggle('fast');
$("li:has(ul)").click(function() {
$(".menu .expanded .menu").hide('fast');
if (this === previousTarget && $(this).children().css('display')!='none') {
$(this).children().hide('fast');
} else {
$(this).children().show('fast');
}
previousTarget = this;
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<ul class="menu">
<li class="expanded">One
<ul class="menu">
<li>One 1</li>
<li>One 2</li>
<li>One 3</li>
<li>One 4</li>
</ul>
</li>
<li class="expanded">Two
<ul class="menu">
<li>Two 1</li>
<li>Two 2</li>
<li>Two 3</li>
<li>Two 4</li>
</ul>
</li>
<li class="expanded">Three
<ul class="menu">
<li>Three 1</li>
<li>Three 2</li>
<li>Three 3</li>
<li>Three 4</li>
</ul>
</li>
</ul>
</body>
I'm using this piece of code for my website to implement a dropdown menu:
<script>
var menu=function(){
var t=15,z=50,s=6,a;
function dd(n){this.n=n; this.h=[]; this.c=[]}
dd.prototype.init=function(p,c){
a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
for(i;i<l;i++){
var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');
}
}
dd.prototype.st=function(x,f){
var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
clearInterval(c.t); c.style.overflow='hidden';
if(f){
p.className+=' '+a;
if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
if(c.mh==c.offsetHeight){c.style.overflow='visible'}
else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
}else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
}
function sl(c,f){
var h=c.offsetHeight;
if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
clearInterval(c.t); return
}
var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
c.style.height=h+(d*f)+'px'
}
return{dd:dd}
}();
</script>
and
<div style="margin-left:150px">
<ul class="menu" id="menu">
<li>Dropdown One
<ul>
<li>Navigation Item 1</li>
<li>
Navigation Item 2
<ul>
<li class="topline">Navigation Item 1</li>
<li>Navigation Item 2</li>
<li>Navigation Item 3</li>
<li>Navigation Item 4</li>
<li>Navigation Item 5</li>
</ul>
</li>
<li>
Navigation Item 3
<ul>
<li class="topline">Navigation Item 1</li>
<li>Navigation Item 2</li>
<li>
Navigation Item 3
<ul>
<li class="topline">Navigation Item 1</li>
<li>Navigation Item 2</li>
<li>Navigation Item 3</li>
<li>Navigation Item 4</li>
<li>Navigation Item 5</li>
<li>Navigation Item 6</li>
</ul>
</li>
<li>Navigation Item 4</li>
</ul>
</li>
<li>Navigation Item 4</li>
<li>Navigation Item 5</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
I tried to convert h.onmouseover and h.onmouseout in h.onclick because i want the menu to expand when the user clicks on it.
How can i do that? I'm newbie in Javascript.
try this:
change from
h.onmouseover=new Function(this.n+'.st('+i+',true)');
h.onmouseout=new Function(this.n+'.st('+i+')');
change to
h.onclick=new Function(this.n+'.st('+i+',true)');
I`ve got a big list with the width of li 33%, so there are 3 columns.
computers monitors hi-fi
sex-toys pancakes scissors
In each of them there is UL hidden, which on click slideToggle.
JQuery
$('.subCategory > .parentleaf:has(ul) > .categoryicon').click(function() {
$(this).siblings('ul').slideToggle('fast');
});
The problem that dont slide as I want, they rebuld the list every time, like so
computers monitors hi-fi
[li]cars sex-toys pancakes
[li]dogs scissors
I want to slide them this way:
computers monitors hi-fi
[li]cars pancakes scissors
[li]dogs
sex-toys
How can I achieve this??
jsFiddle
jsFiddle 2 - in this case need the red bg color be for 3 columns
I added a clearer div between every three li
<ul class="subCategory">
<li class="parentleaf">
<span class="categoryicon">click</span>
<span class="categoryname">Cars</span>
<ul class="submenu">
<li>Car 1</li>
<li>Car 2</li>
<li>Car 3</li>
<li>Car 4</li>
</ul>
</li>
<li class="parentleaf">
<span class="categoryicon">click</span>
<span class="categoryname">Phones</span>
<ul class="submenu">
<li>Phone 1</li>
<li>Phone 2</li>
<li>Phone 3</li>
<li>Phone 4</li>
</ul>
</li>
<li class="parentleaf">
<span class="categoryicon">click</span>
<span class="categoryname">Guns</span>
<ul class="submenu">
<li>Gun 1</li>
<li>Gun 2</li>
<li>Gun 3</li>
<li>Gun 4</li>
</ul>
</li>
<div class="clearer"></div>
<li class="parentleaf">
<span class="categoryicon">click</span>
<span class="categoryname">Notebooks</span>
<ul class="submenu">
<li>Notebook 1</li>
<li>Notebook 2</li>
<li>Notebook 3</li>
<li>Notebook 4</li>
</ul>
</li>
CSS
.clearer
{
clear:both;
}
You can also get the index of the current clicked li and with some math add a clearer div on click and remove it when needed but there I think there is no need for this