I have the usual unordered list for a navigation menu with submenus...
html:
<ul>
<li>Link 1</li>
<li>
Link with submenu
<ul>
<li>Sublink 1</li>
</ul>
</li>
</ul>
All of the links inside of the parent <li> have a border radius. But if the parent <li> has a child <ul>, I don't want the link to have a radius.
I'm currently using this jQuery:
<script>
$("li").has("ul").addClass("sub-radius");
</script>
It works fine except it's targeting the <li>, but I need it to target the child <a> and remove its radius.
Any help would be appreciated.
Try this expression:
$("li:has(ul) > a").addClass("sub-radius");
Edit: If you don't want the sub-items to have border-radii, remove the > in the query.
You don't need jQuery here, you can achieve that with CSS alone. Just use the :only-child pseudo-class:
a:only-child { /* define border-radius here */ }
Live demo: http://jsfiddle.net/QYaqb/
This should work for your HTML
("li").has("ul").children("a").addClass("sub-radius");
I think you want .find:
<script>
$("li:has(ul)").find("a").addClass("sub-radius");
</script>
just need to find the a's inside the li:
$("li").has("ul").find('a').addClass("sub-radius");
here's a fiddle:
http://jsfiddle.net/cBfMV/
Related
I have some menus with unordered list (ul):
<ul class="myul">
<li>Button1</li>
<li>Button2</li>
<li class="selected">Button3</li>
<li>Button4</li>
</ul>
<ul class="myul">
<li>Button5</li>
<li>Button6</li>
<li>Button7</li>
<li>Button8</li>
</ul>
and so on...
How i can change with jQuery the background color of outer ul when the inner li has class="selected"?
Thanks in advance.
In this case, you can use method closest() or parent(). Here is an example using method closest().
Method closest() target a parent of any level relative to a child.
Method parent() only target the first level parent.
This is a jQuery solution:
$('li.selected').closest('ul').css('background', 'green');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="myul">
<li>Button1</li>
<li>Button2</li>
<li class="selected">Button3</li>
<li>Button4</li>
</ul>
<ul class="myul">
<li>Button5</li>
<li>Button6</li>
<li>Button7</li>
<li>Button8</li>
</ul>
This would be a job for the "has" selector in CSS. Unfortunately, as of this writing, there's almost no browser support for it. Safari Technology Preview "cutting edge" browser has support, and that's just about it.
https://caniuse.com/?search=has
You can search for "css parent selector" to see how this has been a longstanding request among many web developers.
I want to hide ul.media-boxes-drop-down-menu area after clicking any menu http://prntscr.com/7j5rmz item. I was tried many times with different different codes. But I was unable to solve it. Any one can help me how may I do it?
Thanks in advance.
Your question is ambiguous. from what i have understood.
<ul id="ul_1">
<li >Some text</li>
</ul>
<ul class="active" id="ul_2">
<li >Some text</li>
</ul>
clicking on ul_1 will hide ul_2, refactor the code according to your need.
$('#ul_1').on('click', function (e) {
$('#ul_2').each(function () {
$(this).removeClass('active');
})
});
you have to give a class to that element you want to hide and then on-click() event you have to search that element inside wrapper main div like:
$('.elementTohode',$(this).parent().parent()).css('display','none')
I know I can do this, I'm just getting lost in the hierarchy and need a second set of eyes on this.
Here's the structure 'm working with:
<div class="nav-column">
<ul>
<li>Link 01
<div>
<ul>
<li>Sublink 01</li>
<li>Sublink 02</li>
<li>Sublink 03</li>
</ul>
</div>
</li>
<li>Link 02</li>
<li>Link 03</li>
</ul>
<div class="home"><h3>Underlying Div</h3></div>
</div>
I am looking to do the following: when you hover over a .nav-column ul li a that visibility of div.home would turn off. Of course there are going to be multiple .nav-columns so I'm making this dynamic.
The jQuery I have right now is:
if ($('.nav-column li').hasClass('active')){
$(this).parent('.nav-column').sibling('div.home').toggleClass("off");
}
without yielding any class addition to the div.home. I already have a hover function adding and removing the class '.active' to the .nav-column li
EDIT EDIT EDIT
I see that I have made a mistake with my code, and in fact the correct code has the div.home OUTSIDE the div.nav-column
This is the proper heirarchy:
<div class="wrapper">
<div class="nav-column">
<ul>
<li>Link 01
<div>
<ul>
<li>Sublink 01</li>
<li>Sublink 02</li>
<li>Sublink 03</li>
</ul>
</div>
</li>
<li>Link 02</li>
<li>Link 03</li>
</ul>
</div>
<div class="home"><h3>Underlying Div</h3></div>
</div>
Once again... I am very sorry... you can sense my sanity levels dropping
Think this is what you want:
$('.nav-column li').each(function(){
if($(this).hasClass('active')) {
$(this).closest('.nav-column').siblings('div.home').toggleClass("off");
}
});
Fiddle:
http://jsfiddle.net/Jf8mp/
Your mistakes:
.sibling('div.home') is wrong, the correct name of method is .siblings()
if condition doesnt determine who is $(this), you have use a function as .each()
UPDATED:
to make it work on hover over .nav-column ul li a:
$('.nav-column li').on('mouseenter','a',function(){
if($(this).closest('li').hasClass('active')) {
$(this).closest('.nav-column').siblings('div.home').toggleClass("off");
}
});
Fiddle:
http://jsfiddle.net/Jf8mp/2/
You need to use .parents() instead of .parent(). .parents() traverses up multiple levels of the DOM while .parent() retrieves the immediate parent of the element matching the selector.
$(this).parents('.nav-column').siblings('div.home').toggleClass("off");
Since you're not targetting the direct parent (ul) of the element matching the selector, you'll need to use .parents() instead.
In addition, you have a second problem. According to your code structure div.home is not a sibling of .nav-column. You can use .find() for this instead.
Per your last edit, the previous statement is no longer applicable. The code snippets have been updated to reflect your edited change.
Alternatively, you could do the following to accomplish the same effect:
$(this).parents('.nav-column').next().toggleClass("off");
use .closest() or .parents() instead of .parent(). also div home is not sibling of .nav-column. You need to use .find() instead of .siblings().Try this:
$(this).closest('.nav-column').find('div.home').toggleClass("off");
or
$(this).parents('.nav-column').find('div.home').toggleClass("off");
the .parent() only goes up one node, you need to use .parents('select')
If I understand:
$('.nav-column li').forEach(elem, index){
elem = $(elem);
if (elem.hasClass('active')){
elem.addClass("Cheese");
}
}
This would add the class "Cheese" to any active li :)
This should be pretty simple. Basically when an item in a list is clicked that text is inserted/replaced into a target div. 'replaceWith' is probably not the thing to use because it deletes the original data.
Also how do you add the class of 'selected' to the text in the target div.
Anyway here is what I have so far: http://jsfiddle.net/BM8Cb/
HTML
<div class="selected" id="here">
<li>All</li>
</div>
<hr>
<ul>
<li>All</li>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
</ul>
CSS
ul {list-style:none;padding:0; margin:0;}
li {cursor:pointer;}
li:hover {color:red;}
.selected {color:red;}
JS
$("li").click(function() {
$("#here").replaceWith(this);
});
Thank you for any help
What about
$("li.item").click(function() {
$("#here").html($(this).html());
});
If all you need is the text.
using replaceWith will replace the DOM node so it's no longer there the next time you try. You need to use append
$("#here").append(this);
and By using 'this' you are copy everything include the event handler. if you want just the text you can do something like
$("#here").append(this.innerHTML);
Change your JS to:
$("li.item").click(function() {
var item = $(this).clone();
item.attr("class","selected");
$(".selected").append(item)
$(this).hide();
});
Here's the fiddle: http://jsfiddle.net/J7JST/2/
This will also add the selected class to your item
I have a menu inside a menu. The first menu anchor(class = menu-container) which contains the submenu has a hover state with styles attached to it. I want these styles of the parent anchor to remain active when the mouse is also over the submenu.
I cant use jQuery, as I am only restricted to pure javascript.
The code is as following:
<ul>
<li>
List Item
</li>
<li>
<a class="menu-container" href="#">List Item</a>
<ul class="submenu">
<li>list item</li>
</ul>
</li>
</ul>
NOTE: The client has requested the menu to be displayed and hidden using pure CSS. I know that using jQuery to achieve the solution for this would be easier, but I am restricted.
Thanks
"Attach the menu-container class to the parent "li" item...
The ":hover" on the li won't work in IE6 and below but shall work in all modern browsers.