I have this HTML, where .subul is hidden with display: none:
<li class="par cat-item cat-item-2">
<a href="category/environment">
<span class="category-text">Environment</span>
<span class="count"><span class="count-hidden">9</span></span>
</a>
<ul class="subul">
<li class="cat-item cat-item-40">
<a href="category/environment/test">
<span class="category-text">test</span>
<span class="count">
<span class="count-hidden">1</span>
</span>
</a>
</li>
</ul>
</li>
I want when li.par is hovered to slide down its child ul (if it has it), however I can't even seem to get it to just trigger on hover. Here's what I tried:
$('body').on('mouseenter', 'li.par', function() {
if ($(this).children("ul").length) {
alert('code');
}
$(this).children("ul").slideDown();
alert('code');
});
EDIT css
ul.subul {
display: none;
}
Try this:
$('li.par').hover(function(){
$(this).children('ul.subul').slideDown();
},function(){
$(this).children('ul.subul').slideUp();
});
Please Use This :
$('body').on('mouseenter', 'li.par', function() {
$(this).find("ul").slideDown();
});
$('body').on('mouseleave', 'li.par', function() {
$(this).find("ul").slideUp();
});
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<ul>
<li class="par cat-item cat-item-2">
<a href="category/environment">
<span class="category-text">Environment</span>
<span class="count"><span class="count-hidden">9</span></span>
</a>
<ul class="subul" style="display:none">
<li class="cat-item cat-item-40">
<a href="category/environment/test">
<span class="category-text">test</span>
<span class="count"><span class="count-hidden">1</span></span>
</a>
</li>
</ul>
</li>
<li class="par cat-item cat-item-2">
<a href="category/environment">
<span class="category-text">Environment</span>
<span class="count"><span class="count-hidden">10</span></span>
</a>
</li>
</ul>
Related
My website came with this javascript for submenu toggle that work, however, when I click a new menu link the rest toggled links does not close so all them are left open.
How to toggle only clicked link and untoggle or remove all "open" links? If you have a new format of javascript that's fine too.
jQuery(function($) {
$('li.has-submenu span.icon-caret').click(function(e){
var $me = $(this);
if($me.siblings('.wsite-menu-wrap').hasClass('open')) {
$me.siblings('.wsite-menu-wrap').toggleClass('open');
} else {
$me.siblings('.wsite-menu-wrap').addClass('open');
}
});
});
HTML:
<div id="navMobile" class="nav mobile-nav">
<ul class="wsite-menu-default">
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Style</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap" style="display:none">
<ul class="wsite-menu">
</ul>
</div>
</li>
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Life</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap" style="display:none">
<ul class="wsite-menu">
</ul>
</div>
</li>
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Work</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap" style="display:none">
<ul class="wsite-menu">
</ul>
</div>
</li>
</ul>
</div>
Remove the open class from each element first : $('.open').removeClass('open');
First I would remove the display: none if you have no animations with jQuery on the menues. Further I don't know your CSS but you can try it like the following example
$(document).ready(function() {
$('#navMobile .wsite-menu-item').on('click', toggleMenuLink);
function toggleMenuLink(event) {
var target = $(event.target).parent();
event.preventDefault();
target.siblings().removeClass('open');
if (target.hasClass('has-submenu')) {
target.toggleClass('open');
}
}
});
#navMobile .has-submenu > .wsite-menu-wrap,
#navMobile .has-submenu > .wsite-menu {
display: none;
}
#navMobile .has-submenu.open > .wsite-menu-wrap,
#navMobile .has-submenu.open > .wsite-menu {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navMobile" class="nav mobile-nav">
<ul class="wsite-menu-default">
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Style</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap">
<ul class="wsite-menu">
<li class="wsite-menu-item-wrap">
<a class="wsite-menu-item">New 1</a>
<span class="icon-caret"></span>
</li>
</ul>
</div>
</li>
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Life</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap">
<ul class="wsite-menu">
<li class="wsite-menu-item-wrap">
<a class="wsite-menu-item">New 2</a>
<span class="icon-caret"></span>
</li>
</ul>
</div>
</li>
<li class="wsite-menu-item-wrap has-submenu">
<a class="wsite-menu-item">Work</a>
<span class="icon-caret"></span>
<div class="wsite-menu-wrap">
<ul class="wsite-menu">
</ul>
</div>
</li>
</ul>
</div>
I was able to crack the code...
$('li.has-submenu span.icon-caret').on('click', function(e) {
event.preventDefault();
var $me = $(this);
if ($me.parent().hasClass('open')) {
$me.parent().removeClass('open');
$me.find('.open').removeClass('open');
}
else {
$('.open').removeClass('open');
$me.parents('.has-submenu').children('.wsite-menu-wrap').addClass('open');
}
});
Im experiencing an issue adding a second child to the drop-down-menu.
here is my html code:
<ul class="sidenav sidenav-fixed" id="nav-mobile">
<li>
<a onclick="load('file-name')"><i class="material-
icons">home</i>TEXT
</a>
</li>
<div class="divider"></div>
<li><a onclick="load('file-name')"><i class="material-
icons">apps</i>TEXT</a>
</li>
<li><a onclick="load('file-name')"><i class="material-
icons">copyright</i>Copyright</a>
</li>
<li class="button-dropdown">
<a onclick="load('file-name') class="dropdown-toggle"><i class="material-
icons">assignment</i>Unit A<i class="fa fa-angle-right changed"></i>
</a>
<ul class="dropdown-menu" style="display: none;">
<li>
<a onclick="load('file-name')">Menu 1</a>
</li>
</ul>
<ul class="dropdown-menu" style="display: none;">
<li>
<a onclick="load('file-name')">Menu 2</a>
</li>
</ul>
</li>
</ul>
and here is my js:
jQuery(document).ready(function (e) {
$(".dropdown-toggle").click(function () {
$(this).parents(".button-dropdown").children(".dropdown-
menu").toggle().parents(".button-dropdown").children(".dropdown-
toggle").addClass("active")
});
$('.dropdown-toggle').on('click', function () {
$(this)
.find('.changed')
.toggleClass('fa-angle-down')
.toggleClass('fa-angle-right');
});
});
Here are the styles applied for drop-down-menu:
.dropdown-menu li > a {
text-align: center;
}
.dropdown-menu li:hover > a {
background-color: #385170 !important;
color: #fff !important;
}
.changed {
margin-left: 5px;
}
I need to add another child under Menu 1 and Menu 2.
Thanks a lot for your help.
The first issue I found in your code is that you are defining the same event twice, which means that only the last one will be executed.
To append items with jQuery inside an event listener is as easy as:
Keeping code clean.
Globals at the beginning of your code:
var buttonDropdown = $(".button-dropdown");
And then your event listener for dropdown-toggle click:
$('.dropdown-toggle').on('click', function () {
buttonDropdown.append("<li>new item</li>");
});
This will append a new item to button-dropdown everytime you click dropdown-toggle.
Here is an example:
var buttonDropdown = $(".button-dropdown");
jQuery(document).ready(function (e) {
$('.dropdown-toggle').on('click', function (event) {
let itemNumber = buttonDropdown.children().length;
buttonDropdown.append("<ul><li>Menu "+itemNumber+"</li></ul>");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="sidenav sidenav-fixed" id="nav-mobile">
<li>
<a onclick="load('file-name')">
<i class="material- icons">home</i>TEXT
</a>
</li>
<div class="divider"></div>
<li>
<a onclick="load('file-name')">
<i class="material- icons">apps</i>TEXT
</a>
</li>
<li>
<a onclick="load('file-name')">
<i class="material- icons">copyright</i>Copyright
</a>
</li>
<li class="button-dropdown">
<a onclick="load('file-name')" class="dropdown-toggle">
<i class="material- icons">assignment</i>Unit A
<i class="fa fa-angle-right changed"></i>
</a>
<ul class="dropdown-menu" style="display: block;">
<li>
<a onclick="load('file-name')">Menu 1</a>
</li>
</ul>
<ul class="dropdown-menu" style="display: block;">
<li>
<a onclick="load('file-name')">Menu 2</a>
</li>
</ul>
</li>
</ul>
Note: This example is made from the context you provided. If it still not solves your entire issue, feel free to edit your question and comment here so I can update mine with the requirements for your question.
And also, you did not provide any styles for your code, that's why it looks so plain.
Below I am looking through a list of swatches and assigning the title attribute to variable and then displaying this value below the swatch.
On mouseleave if the parent has selected class I return false so that the title attribute value is still shown. However if I mouseleave from swatch where parent does not have selected class the title attribute value becomes empty as shown in the code.
How do I modify so that on mouseleave if parent does not have selected class, it uses the title attribute value from the parent selected class?
$('.producttile_swatches .swatches ul li span.swatch_color').each(function(){
$(this).mouseenter(function(){
var swatchColor = $(this);
var swatchTitle = swatchColor.attr('title');
var swatchTitleInsert = swatchColor.closest('.carousel').next();
swatchTitleInsert.html(swatchTitle);
$(this).mouseleave(function(){
if($(this).parent().hasClass('selected')){
return false;
} else {
//I want to display title attr value from parent selected//
swatchTitleInsert.html('');
}
});
});
});
span {display:block;margin-bottom:10px;width:50px;height:50px;background:#ccc;}
.swatch-title-insert {width:300px;height:50px;background:blue;color:#fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel producttile_swatches">
<div class="swatches">
<ul>
<li class="product_swatch_list_item">
<a href="#" class="selected">
<span class="swatch_color" title="red"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="white"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="blue"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="swatch-title-insert"></div>
<div class="carousel producttile_swatches">
<div class="swatches">
<ul>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="red"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#" class="selected">
<span class="swatch_color" title="white"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="blue"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="swatch-title-insert"></div>
<div class="carousel producttile_swatches">
<div class="swatches">
<ul>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="red"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="white"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#" class="selected">
<span class="swatch_color" title="blue"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="swatch-title-insert"></div>
I think this is your answer:
$('.producttile_swatches .swatches ul li span.swatch_color').each(function(){
var swatchColor = $(this);
var swatchTitle = swatchColor.attr('title');
var swatchTitleInsert = swatchColor.closest('.carousel').next();
$(this).mouseenter(function(){
swatchTitleInsert.html(swatchTitle);
$(this).mouseleave(function(){
if($(this).parent().hasClass('selected')){
return false;
} else {
var swatchTitle = $(this).closest('.producttile_swatches').find('.swatches ul li a.selected span.swatch_color').attr('title');
swatchTitleInsert.html(swatchTitle);
}
});
});
});
span {display:block;margin-bottom:10px;width:50px;height:50px;background:#ccc;}
.swatch-title-insert {width:300px;height:50px;background:blue;color:#fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel producttile_swatches">
<div class="swatches">
<ul>
<li class="product_swatch_list_item">
<a href="#" class="selected">
<span class="swatch_color" title="red"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="white"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="blue"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="swatch-title-insert"></div>
<div class="carousel producttile_swatches">
<div class="swatches">
<ul>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="red"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#" class="selected">
<span class="swatch_color" title="white"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="blue"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="swatch-title-insert"></div>
<div class="carousel producttile_swatches">
<div class="swatches">
<ul>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="red"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#">
<span class="swatch_color" title="white"></span>
</a>
</li>
<li class="product_swatch_list_item">
<a href="#" class="selected">
<span class="swatch_color" title="blue"></span>
</a>
</li>
</ul>
</div>
</div>
<div class="swatch-title-insert"></div>
I am working on a sidebar with (single menu) and (submenus).
The menus that contains (submenu) has (+-) toggle, and the ones with singles has nothing.
How can I hide the (+-) of the single menus from other similar elements.
I have tried this way, it hides for all of them.
HTML
<div class="multitoggle">
<ul id="accordions">
<li class="nav-parents">
<div class="link"> <span class="plus">+</span> <span class="minus">-</span> CURRENT ACCOUNTS</div>
<ul class="submenu">
<li>MPOWER CLASSIC</li>
<li>MPOWER GOLD</li>
<li>MPOWER PLATINUM</li>
</ul>
</li>
<li class="nav-parents">
<div class="link"> <span class="plus">+</span> <span class="minus">-</span> OUR SEGMENTS</div>
</li>
</ul>
</div>
JS
$(window ).load(function(e) {
if ($('.nav-parents').has('submenu').length == 0) {
$('.nav-parents').find('.plus, .minus').css('display', 'none');
}
});
Actually only has() will not work in this case. You have to use the combination of not() and has(). And also you missed the dot before submenu. You can do it like following.
$(window ).load(function(e) {
$('.nav-parents').not(':has(.submenu)').find('.plus, .minus').css('display', 'none');
});
Your if statement doesn't do much here, because when you run this:
$('.nav-parents').find('.plus, .minus').css('display', 'none');
it will just select all .nav-parents again and hide their pluses and minuses.
To select only the nav-parents with no submenu, you should use this jQuery code:
$('.nav-parents').not(':has(.submenu)')
Here is your code working in a snippet:
$(window).load(function(e) {
$('.nav-parents')
.not(':has(.submenu)')
.find('.plus, .minus')
.hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multitoggle">
<ul id="accordions">
<li class="nav-parents">
<div class="link">
<span class="plus">+</span>
<span class="minus">-</span>
CURRENT ACCOUNTS
</div>
<ul class="submenu">
<li>
MPOWER CLASSIC
</li>
<li>
MPOWER GOLD
</li>
<li>
MPOWER PLATINUM
</li>
</ul>
</li>
<li class="nav-parents">
<div class="link">
<span class="plus">+</span>
<span class="minus">-</span>
OUR SEGMENTS
</div>
</li>
</ul>
</div>
You can do it in css itself as the div will be the last-child or only-child if it doesn't have a submenu. so you can achieve it by using
.nav-parents > div.link:last-child > span{
display:none;
}
.nav-parents > div.link:last-child > span{
display:none;
}
<div class="multitoggle">
<ul id="accordions">
<li class="nav-parents">
<div class="link"> <span class="plus">+</span> <span class="minus">-</span> CURRENT ACCOUNTS</div>
<ul class="submenu">
<li>MPOWER CLASSIC</li>
<li>MPOWER GOLD</li>
<li>MPOWER PLATINUM</li>
</ul>
</li>
<li class="nav-parents">
<div class="link"> <span class="plus">+</span> <span class="minus">-</span> OUR SEGMENTS</div>
</li>
</ul>
</div>
Jquery way:-
If you still want to do it on jquery you can remove easily by
$(window ).load(function(e) {
$('.nav-parents > div.link:only-child > span').css('display', 'none');
});
$(window ).load(function(e) {
$('.nav-parents > div.link:last-child > span').css('display', 'none');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multitoggle">
<ul id="accordions">
<li class="nav-parents">
<div class="link"> <span class="plus">+</span> <span class="minus">-</span> CURRENT ACCOUNTS</div>
<ul class="submenu">
<li>MPOWER CLASSIC</li>
<li>MPOWER GOLD</li>
<li>MPOWER PLATINUM</li>
</ul>
</li>
<li class="nav-parents">
<div class="link"> <span class="plus">+</span> <span class="minus">-</span> OUR SEGMENTS</div>
</li>
</ul>
</div>
I have an vertical navigation with two levels.
What I want is when I press the main li to add active and open class just to the main li and when I press on the sub-menu I want to add active just to that li. Here is my code:
HTML
<ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
<li class="start active open">
<a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Rezervari</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li class="active">
<a href="#">
<i class="icon-bar-chart"></i>
Vezi rezervari</a>
</li>
<li>
<a href="#">
<i class="icon-bulb"></i>
Istoric rezervari</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Rezervari</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li>
<a href="#">
<i class="icon-bar-chart"></i>
Vezi rezervari</a>
</li>
<li>
<a href="#">
<i class="icon-bulb"></i>
Istoric rezervari</a>
</li>
</ul>
</li>
</ul>
JS
$(".sub-menu li").on("click", function() {
$(".sub-menu li").removeClass("active");
$(this).addClass("active");
});
$(".page-sidebar-menu li").on("click", function() {
$(".page-sidebar-menu li").removeClass("active open");
$(this).addClass("active open");
});
You have to target the closest li inside class .page-sidebar-menu
$(".sub-menu li").on("click", function() {
$(".sub-menu li").removeClass("active");
$(this).addClass("active");
});
$(".page-sidebar-menu > li").on("click", function() {
$(".page-sidebar-menu > li").removeClass("active open");
$(this).addClass("active open");
});
i'm not sure if i understood exactly what you asked.
But, from what i get i remade your html a bit (added a menu class to bind the click event more precisely)
<ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
<li class="menu start active open"> <a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Rezervari</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li class="active"> <a href="#">
<i class="icon-bar-chart"></i>
Vezi rezervari</a>
</li>
<li> <a href="#">
<i class="icon-bulb"></i>
Istoric rezervari</a>
</li>
</ul>
</li>
<li class="menu"> <a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Rezervari</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li> <a href="#">
<i class="icon-bar-chart"></i>
Vezi rezervari</a>
</li>
<li> <a href="#">
<i class="icon-bulb"></i>
Istoric rezervari</a>
</li>
</ul>
</li>
</ul>
And so my version of your jQuery looks like that :
$(document).ready(function () {
// added a menu class to bind the click event more precisely
$(".menu > a").on("click", function () {
// nothing is active but this
$(".active").removeClass("active");
// and close the other menus
$(".menu").removeClass("open");
$(this).parent().addClass("active open");
});
$(".sub-menu li").on("click", function () {
// nothing is active but this
$(".active").removeClass("active");
$(this).addClass("active");
});
});
The CSS i used to test it was just this :
.menu { display: block; }
.sub-menu { display: none; }
.open, .open .sub-menu { display: block; }
.active { text-transform: uppercase; }
For an example, go check that jsfiddle that i made to answer you (really basic css here) and tell me if that's what you asked for.