Show only children of current mouseover div :jQuery - javascript

I have categories that have children subcategories, the first time all subcategories children are invisible, I want when I pass the mouse over the category number the subcategory of this current category display and when I locate the mouse they return invisible
Html:
<ul class="product-categories">
<li class="cat-item cat-parent">
<span class="icon-toggle"></span>Baby
<ul class="children" style="display: none">
<li class="cat-item cat-parent">
<span class="icon-toggle"></span>Baby Girl
<ul class="children" style="display: none">
<li class="cat-item "><span class="icon-toggle"></span>Accessories</li>
<li class="cat-item "><span class="icon-toggle"></span>Bodysuits</li>
</li>
</ul>
<li class="cat-item cat-parent">
<span class="icon-toggle"></span>Baby Boy
<ul class="children" style="display: none">
<li class="cat-item "><span class="icon-toggle"></span>Accessories</li>
</ul>
</li>
</ul>
</li>
<li class="cat-item cat-parent">
<span class="icon-toggle"></span><a href=">Boy</a>
</li>
<li class="cat-item cat-parent">
<span class="icon-toggle"></span>Girl
<ul class="children" style="display: none">
<li class="cat-item "><span class="icon-toggle"></span>Shoes</li>
</ul>
</li>
<li class="cat-item cat-parent">
<span class="icon-toggle"></span>Nursery Furnishings
<ul class="children" style="display: none">
<li class="cat-item "><span class="icon-toggle"></span>Pushchairs & Prams</li>
<li class="cat-item "><span class="icon-toggle"></span>Pushchairs's accessories </li>
<li class="cat-item "><span class="icon-toggle"></span>Travel accessories</li>
</ul>
</li>
</ul>
jquery:
jQuery(".cat-parent").on("mouseover", function () {
jQuery( this " .children" ).css({'display': "block"});
});

Your selector in incorrect. You need to use $(".children", this) or .find() to do this work.
jQuery(".children", this).css({'display': "block"});
// Or
jQuery(this).find(".children").css({'display': "block"});
Also you can use mouseout event to hiding elements after mouse out.
jQuery(".cat-parent").on("mouseover", function () {
jQuery(".children", this).css({'display': "block"});
}).on("mouseout", function(){
jQuery(".children", this).css({'display': "none"});
});
jQuery(".cat-parent").on("mouseover", function () {
jQuery( " .children" , this).css({'display': "block"});
}).on("mouseout", function(){
jQuery( " .children" , this).css({'display': "none"});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="product-categories">
<li class="cat-item cat-parent">
<span class="icon-toggle"></span>Baby
<ul class="children" style="display: none">
<li class="cat-item cat-parent">
<span class="icon-toggle"></span>Baby Girl
<ul class="children" style="display: none">
<li class="cat-item "><span class="icon-toggle"></span>Accessories</li>
<li class="cat-item "><span class="icon-toggle"></span>Bodysuits</li>
</li>
</ul>
<li class="cat-item cat-parent">
<span class="icon-toggle"></span>Baby Boy
<ul class="children" style="display: none">
<li class="cat-item "><span class="icon-toggle"></span>Accessories</li>
</ul>
</li>
</ul>
</li>
<li class="cat-item cat-parent">
<span class="icon-toggle"></span><a href=">Boy</a>
</li>
<li class="cat-item cat-parent">
<span class="icon-toggle"></span>Girl
<ul class="children" style="display: none">
<li class="cat-item "><span class="icon-toggle"></span>Shoes</li>
</ul>
</li>
<li class="cat-item cat-parent">
<span class="icon-toggle"></span>Nursery Furnishings
<ul class="children" style="display: none">
<li class="cat-item "><span class="icon-toggle"></span>Pushchairs & Prams</li>
<li class="cat-item "><span class="icon-toggle"></span>Pushchairs's accessories </li>
<li class="cat-item "><span class="icon-toggle"></span>Travel accessories</li>
</ul>
</li>
</ul>

I would suggest that you'd handle this with CSS only. There's no need to use JavaScript to handle what you want to do.
I will assume that you want to display the subcategories when the user moves the mouse over the .cat-parent element. The following style will do the job:
.cat-parent:hover ul.children {
display:block;
}
To break it down. This selector means that any ul element with the class of children, that is nested within an element with the class of .cat-parent, will get the above styling when the .cat-parent element is being hovered (hover is basically the same as mouseover.)
And as soon as you pull the mouse away from the element, the :hover sub selector disappears, and the display goes back to none.
So you wouldn't need the jQuery code. You only need to add the above style in your CSS file (or in a style tag on in the HTML file if you do not use any CSS file.)
A great bonus with handling this kind of design logic with pure CSS is that it works even on browsers that have JavaScript turned off.

Related

How to modify the li items with JavaScript?

I'm sorry, I speak a little English.
My HTML:
<div class="widgetcontent">
<ul>
<li class="cat-item cat-item-526">
A test
</li>
<li class="cat-item cat-item-527">
B test
<ul class='children'>
<li class="cat-item cat-item-528">
Test B1
</li>
<li class="cat-item cat-item-529">
Test B2
</li>
</ul>
</li>
</ul>
</div>
I would like:
If there is ul.children, modify with JavaScript and add the div.dropdown:
<li class="cat-item cat-item-527">
B test
<div class="dropdown" onclick="myFunction('cat-item-527')">â–¾</div><!-- ADD -->
<ul class='children'>
<li class="cat-item cat-item-528">
Test B1
</li>
<li class="cat-item cat-item-529">
Test B2
</li>
</ul>
</li>
How to? Without jQuery or another JS framework. Native JS please.
Thank you very much.
You can do this by finding all li elements and then determining if there is a ul inside it. If so just add an element using insertBefore
In this example I have coloured the element red just to indicate its added in the correct place.
[...document.querySelectorAll("ul li.cat-item")].forEach(li => {
const ul = li.querySelector("ul.children");
if(ul){
const div = document.createElement("div");
div.classList.add("dropdown");
div.addEventListener("click",() => console.log("Clicked new div", li.className))
li.insertBefore(div,ul)
}
});
.dropdown{
height:10px;
background-color:red
}
<div class="widgetcontent">
<ul>
<li class="cat-item cat-item-526">
A test
</li>
<li class="cat-item cat-item-527">
B test
<ul class='children'>
<li class="cat-item cat-item-528">
Test B1
</li>
<li class="cat-item cat-item-529">
Test B2
</li>
</ul>
</li>
</ul>
</div>

Fade in and fade out elements with hover in jQuery

I'm working with a menu. If the user moves the cursor over principal elements of the menu, it shows a sub-menu (it has a delay to hide), but if I move the cursor over another principal element, the previous element is still showing behind the new element (and is only hide passing the delay).
How can hide the previous element when I pass the cursor over another principal element?
Below is the menu:
$('li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(100);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(1000).fadeOut(100);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="main-menu" class="nav navbar-nav ref">
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li> </li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
</ul>
</li>
</ul>
</li>
</ul>
I changed your second menu id to #drop-two.
$(document).ready(function(){
$('.dropdown-menu, .dropdown-menu2').hide();
$('#drop-to').mouseover(function() {
$('.dropdown-menu').fadeIn();
})
$('#drop-to').mouseout(function() {
$('.dropdown-menu').fadeOut(1000);
})
$('#drop-two').mouseover(function() {
$('.dropdown-menu2').fadeIn();
})
$('#drop-two').mouseout(function() {
$('.dropdown-menu2').fadeOut(1000);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="main-menu" class="nav navbar-nav ref">
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
<li> </li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option">
<a id="drop-two" href="#" class="dropdown-toggle firstTextOption">P element</a>
<ul class="dropdown-menu2 dropdown-menu-large row change-f">
<li class="col-sm-4 option-sm">
<ul>
<li> </li>
<li class="dropdown-header title">subelement</li>
<li class="dropdown-header title">subelement</li>
</ul>
</li>
</ul>
</li>
</ul>

Expanding child UL when clicked not working in jQuery

I'm new to JS and having an issue toggle show / hide for a hidden ul menu.
Source:
<ul class="main-menu">
<li class="static-content" data-leaf="true" id="contact">
Contact Us
</li>
<li class="" data-leaf="false" id="rules">
Sports Betting Rules
<ul class="submenu" id="submenu-rules" style="display: none;">
<li class="static-content wager-types" data-leaf="true" id=
"types">
Wager Types
</li>
<li class="static-content" data-leaf="true" id="odds">
Odds & Lines
</li>
<li class="static-content rules-policies" data-leaf="true" id=
"policies">
Rules & Policies
</li>
<li class="static-content" data-leaf="true" id="bonuses">
Sports Bonuses
</li>
</ul>
</li>
<li class="" data-leaf="false" id="conditions">
Terms & Conditions
<ul class="submenu" id="submenu-conditions" style="display: none;">
<li class="static-content" data-leaf="true" id=
"termsOfService">
Terms of Service
</li>
<li class="static-content" data-leaf="true" id="privacy">
Privacy Policy
</li>
</ul>
</li>
<li class="static-content" data-leaf="true" id="view">
View in: Mobile | Full Site
</li>
</ul>
JS
// Expanding JS for sub-menus
$('.submenu').hide();
$(".li a").click(function (e) {
if ($(this).parent().data("leaf") == 'false') {
e.preventDefault();
$(this).siblings('ul').toggle();
}
return false;
});
When I click the link that has the parent li data-leaf of false I need it to toggle / show the child ul but think I'm doing something wrong.
Any ideas anyone?
you can target the selector using the data attribute: $('li[data-leaf="false"]>a')
$(document).ready(function() {
$('.submenu').hide();
$('li[data-leaf="false"]>a').on('click', function(e) {
e.preventDefault();
console.log('hey hey');
$(this).closest('li').find('ul').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul class="main-menu">
<li class="static-content" data-leaf="true" id="contact">
Contact Us
</li>
<li class="" data-leaf="false" id="rules">
Sports Betting Rules
<ul class="submenu" id="submenu-rules" style="display: none;">
<li class="static-content wager-types" data-leaf="true" id=
"types">
Wager Types
</li>
<li class="static-content" data-leaf="true" id="odds">
Odds & Lines
</li>
<li class="static-content rules-policies" data-leaf="true" id=
"policies">
Rules & Policies
</li>
<li class="static-content" data-leaf="true" id="bonuses">
Sports Bonuses
</li>
</ul>
</li>
<li class="" data-leaf="false" id="conditions">
Terms & Conditions
<ul class="submenu" id="submenu-conditions" style="display: none;">
<li class="static-content" data-leaf="true" id=
"termsOfService">
Terms of Service
</li>
<li class="static-content" data-leaf="true" id="privacy">
Privacy Policy
</li>
</ul>
</li>
<li class="static-content" data-leaf="true" id="view">
View in: Mobile | Full Site
</li>
</ul>
Just remove .(dot) before li in your js, it working great!
// Expanding JS for sub-menus
$('.submenu').hide();
$("li a").click(function (e) {
if ($(this).parent().data("leaf") == 'false') {
e.preventDefault();
$(this).siblings('ul').toggle();
}
return false;
});
your code has 2 issues.
1..li is not a class it is html element so it should be $("li>a").click(function (e) {
2. the value false is boolean not string so use this if ($(this).parent().data("leaf") == false) {
Your code working Demo

Add class to every last-item

I would like to add that class "last-item" every last li.
Im trying this but without sucess:
<script>
$(".cbp-tm-submenu .product-categories li .children li:last-child").addClass("last-item");
<script>
I tried put on header and on footer.
HTML:
<ul class="cbp-tm-submenu">
<img class="backgroundtooltiptop" alt="background tooltip" src="http://localhost:8888/era420/wp-content/themes/era420/images/tooltipbackgroundtop.png">
<li id="woocommerce_product_categories-4" class="widget woocommerce widget_product_categories">
<ul class="product-categories">
<li class="cat-item cat-item-16 current-cat cat-parent">
Lançamentos
<ul class="children">
<li class="cat-item cat-item-17">
teste
</li>
<li class="cat-item cat-item-18">...</li>
<li class="cat-item cat-item-19">...</li>
</ul>
</li>
</ul>
</li>
<img class="backgroundtooltipbot" alt="background tooltip bot" src="http://localhost:8888/era420/wp-content/themes/era420/images/tooltipbackgroundbot.png">
</ul>
This is enough:
$(".cbp-tm-submenu li:last-child").addClass("last-item");

Variable width for second level ul in Nicemenu (Drupal)

I have a menu structure like the below in Drupal 7. This is a part of the Nicemenu module in Drupal. I am applying a width to the second level ul - the sub menu ul, and this gets applied to all the second level ul. What I need is a variable width for the second level ul's. All these HTML sre dynamically generated by Drupal and I may not be able to hard code any classes or ID to these second level uls. I targeted these using pseudo-classes but didn't achieve what I want.
Here's the HTML
<ul class="menu">
<li class="first leaf"><a class="active" href="">Menu 1</a></li>
<li class="expanded"><a title="" href="">Menu 2</a>
<ul class="menu"> <!--This should have width of 200px-->
<li class="first leaf">Menu 2a</li>
<li class="last leaf">Menu 2b</li>
</ul>
</li>
<li class="expanded"><a title="" href="">Menu 3</a>
<ul class="menu"><!-- Width should be 350px-->
<li class="first leaf">Menu 3a</li>
<li class="leaf">Menu 3b</li>
<li class="leaf">Menu 3c</li>
<li class="leaf">Menu 3d</li>
<li class="leaf">Menu 3e</li>
<li class="leaf">Menu 3f</li>
<li class="leaf">Menu 3g</li>
<li class="last leaf">Menu 3h</li>
</ul>
</li>
<li class="expanded"><a title="" href="">Menu 4</a>
<ul class="menu"><!-- Width should be 200px-->
<li class="first expanded"><a title="" href="">Menu 4a</a><ul class="menu">
<li class="first last leaf">Menu 4a-1</li>
</ul>
</li>
<li class="last leaf">Menu 4b</li>
</ul>
</li>
<li class="leaf">Menu 5</li>
<li class="expanded"><a title="" href="">Menu 5a</a>
<ul class="menu"><!-- Width should be 150px-->
<li class="first last leaf">Menu 5b
</li>
</ul>
</li>
<li class="leaf">Menu 6</li>
<li class="leaf">Menu 7</li>
<li class="expanded"><a title="" href="">Menu 8</a>
<ul class="menu"><!-- Width should be 200px-->
<li class="first leaf">Menu 8</li>
<li class="last leaf">Menu 9</li>
</ul></li>
<li class="last leaf">Contact Us</li>
</ul>
You really need id attributes in your <ul> elements, so you can use CSS to set the widths for each id. This is the most convenient and robust way to style separate HTML elements.
Add html ID to content field shows a solution how to add these id attributes.

Categories