I am trying to change the css class of the parent list item when a child list is hovered. For example, I have:
<ul class="ipro_menu">
<li class="menu-first">
First
<ul class="sub-menu">
<li>Other A</li>
<li>Other B</li>
</ul>
</li>
<li class="menu-second">Second</li>
</ul>
So, what I'm trying to accomplish is when a .sub-menu li element is hovered, change the class of the parent li it resides in. In this example, if li containing "Other A" or "Other B" is hovered, change the class of the li.menu-first.
I've tried:
$('.sub-menu li').hover(function(){
//$(this).closest('.ipro_menu li').addClass('color_a');
//$(this).parent().addClass('color_a');
//$(this).parents('li').prev().addClass('color_a');
// None of the above 3 worked...
});
I think you just want:
$(this).parents("li").addClass("color_a")
That should work. I don't know why you added .prev() in your attempt.
Related
I am quite new to everything about html/js/css. Right now i need a list so i decided to use a list that u can slidetoggle. I looked it up and found how to recreate that effect (the code below):
var subMenu = jQuery(".tableContainer ul li ul li");
var linkClick = jQuery(".tableContainer ul li").filter(":has(ul)");
linkClick.click(function () {
$(this).find('ul li').slideToggle(200);
});
(if you are wondering about the 2 ul and li, it is because i want that list in another list, but that doesn t change the question so i didn t include it in my explanation)
Since i am quite new to this topic, i only understand like 70% of what is happening. But for my project i need to work with the elements of the list(the ones which were hidden and after sliding down visible). I want to do stuff that requires clicking them like highlight on click, but now i encounter the problem, that the code i posted makes the slide effect being triggered not only by the headline, but also by the elements. So i cannot click elements without minimizing the list with the same click (obviously the elements are hidden again then). I hope you guys can explain me how to make the function only be triggered by the head object and not by the whole list element(head and the expanded list).
Look the slide effect is being triggered not only by the headline but also by the elements that are because the concept of event bubbling which basically means in case of click event if you clicked a child element the event is bubbled by default to the parent elements tree till the document level firing any registered event handler. so when you click the element you click the headline too, so you need to add another child element and handle the click on it something like this:-
<div class="tableContainer">
<ul>
<li> <span>menu 1</span>
<ul>
<li>link 1</li>
</ul>
</li>
<li><span> menu 2</span>
<ul>
<li>link 2</li>
</ul>
</li>
<li><span> menu 3</span>
<ul>
<li>link 3</li>
</ul>
</li>
<li> <span>menu 4</span>
<ul>
<li>link 4</li>
</ul>
</li>
</ul>
</div>
$(function() {
var subMenu = jQuery(".tableContainer ul li ul li");
var linkClick = jQuery(".tableContainer span");
console.log(linkClick.length);
linkClick.click(function() {
console.log('clicked');
$(this).siblings('ul').slideToggle(200);
});
});
Full Working Example Here
Hope this answers your question.
<ul class="level1">
<li>
<span>category name</span>
<ul class="level2"></ul>
<ul class="level2"></ul>
<ul class="level2"></ul>
<ul class="level2"></ul>
<ul class="level2"></ul>
<li>
</ul>
I want selected ul that is with level2 class to move to top of the
ul.level1 li but it should be after ul.level1 li span.
Actually this is regarding move elements in bootstrap tree
http://jsfiddle.net/umutc1/eyf9q87c/
See this JSFiddle, think it's what you're after: JSFiddle
Essentially, you hook onto the event that triggers the move, find the thing you want to move, find where you want to move it to and use the .after() jq function to do the move.
HTH
$(function(){
$("ul.level2").click(function(e){
var clickedUL = $(e.target).closest("UL");
$("ul > li > span").after(clickedUL);
});
});
Please see the below code i have for my main menu on my website.
I want to add a data-toggle to the link tag for the dropdown but when the li doesnt contain ul I dont want the data-toggle added to the a tag. Would jquery be able to do this?
I am using bootstrap for this but in my menu I have menu links with no dropdown and the link url i add doesnt work as its expecting a dropdown to appear, if there a way around this?
<ul class="nav navbar-nav">
<li class="dropdown yamm-fw">
Menu 1
<ul class="dropdown-menu">
<li>Menu Item</li>
</ul>
</li>
<li class="dropdown yamm-fw">
Menu 2
</li>
<li class="dropdown yamm-fw">
Menu 3
</li>
<li class="dropdown yamm-fw">
Menu 4
</li>
<li class="dropdown yamm-fw">
Menu 5
</li>
</ul>
Try this:
$('.dropdown').each(function() {
if ($(this).find('UL').length === 0) {
$(this).find('A').data('toggle', true);
}
});
This is better, any li inside the ul.nav that has a child ul will have data-toggle added.
$("ul.nav li ul").parent().attr("data-toggle","")
You could also use the :has selector
$(function() {
$(".dropdown:has(ul) a").attr("data-toggle", /*value here*/);
});
Both answers are correct, this is just another option using the :has selector. It's also a one-liner :)
$("ul.nav > li:has(ul) a").attr("data-toggle","");
I have this menu and I want to set one variable for each li item, and alert with it's text when clicked. This was easy, I solved for this with the script below.
$("ul#menudropd .animal li a").click(function() {
var whatever = $(this).text();
alert(whatever); });
Now, I also need to include the 'parent' (ie, the text in the mainlinks class) in the alert. The parent is usually never clicked, only hovered over to display the children. But, it is text so it should be easy right?
Example:
Currently, you click on "Puppy" and alert says "Puppy". I need to say "Dog : Puppy". Same for the next section. Click on "Kitten" I need the alert to come back as "Cat: Kitten".
I know how to have the alert display both once I get that 2nd variable set, I just can't figure out how to do it without clicking it. Any ideas?
<ul id="menudropdown">
<li class="mainlinks"> Dog
<div class="animal dog">
<li> Puppy </li>
<li> Pup </li>
</div>
</li>
<li class="mainlinks"> Cat
<div class="animal cat">
<li> Kitty </li>
<li> Kitten </li>
</div>
</li>
</ul>
Use closest() and you may also want ul instead of div, the html you have seems invalid as div directly contain li element.
The HTML List item element (<li>) is used to represent a list item. It
should be contained in an ordered list (), an unordered list
() or a menu (), reference.
Live Demo
Html
<ul id="menudropdown">
<li class="mainlinks"> Dog
<ul class="animal dog">
<li> Puppy
</li>
<li> Pup
</li>
</ul>
</li>
<li class="mainlinks"> Cat
<ul class="animal cat">
<li> Kitty
</li>
<li> Kitten
</li>
</ul>
</li>
</ul>
Javascript
$("ul#menudropdown .animal li a").click(function () {
alert($(this).closest('.mainlinks').find('a:first').text());
});
You should find the closest li tag with your mainlinks class and then select the text of the first child.
Like this:
$(this).child().first().text()+" : "+$(this).text();
I have nested lists and I need to style every items. Normally I would do something like this:
$('#myList li').addClass('myClass');
However, because they are nested, I need to style just text, I suppose. How do I do this with jQuery? I thied this, but it did not work:
$('#myList li').text().addClass('myClass');
Here's HTML
<ul id="myList">
<li>
item 1
</li>
<li>
item 2
<ul>
<li>
asdasd
</li>
</ul>
</li>
</ul>
I NEED TO StYLE EVERY LIST ITEM
first level, direct child
$('#myList > li').addClass('myClass');
second level AND higher
$('#myList li li').addClass('myClass');
This subject is largely documented on jquery api selector page
Now your question has been edited : you need to style ALL list items :
CSS
li { /* will affect ALL list-items */}
Now you made it clearer :
Wrapping what's inside the LI element
$('li').wrapInner( "<span class='your-css-selector'></span>" );
Now you shown that you won't search more than a copy-paste solution :
Wrapping what's inside the LI element but not what resides in another inner-element
$('#myList li').each(function(){
$(this).contents().first().wrap("<span/>")
});
credit to user PLS copy-pasted from his comment.
You cannot just style text.
You can specifically style the nested list items by doing this:
$('ul#myList > li > ul > li').addClass('myClass');
This will add the myClass class to the item that has the text asdasd in your example
Just wrap your text in a span and apply class on them. When you apply class on li all of its contents gets impacted hence any descendants as well like nested ul under the li. Instead just wrap the texts in an element and apply class to them.
<ul id="myList">
<li>
<span>item 1</span>
</li>
<li>
<span>item 2</span>
<ul>
<li>
<span>asdasd</span>
</li>
</ul>
</li>
</ul>
and
$('#myList li > span').addClass("myClass");
With this you could just handle it using Css rule itself.