Wondering if anyone can help, please.
I've got some jQuery setup for my sub-menu in WordPress. It works perfectly until I have a sub-menu within a sub-menu. The classes don't change in WordPress so the jQuery no longer works.
Here's my jQuery:
$('.mobile li > .sub-menu').parent().click(function() {
$(".sub-menu").slideUp();
var submenu = $(this).children('.sub-menu');
if ( $(submenu).is(':hidden') ) {
$(submenu).slideDown(200);
} else {
$(submenu).slideUp(200);
}
});
Here's an example of how WordPress outputs the menu code:
<ul id="menu-main-menu" class="mobile">
<li>
Item
<ul class="sub-menu">
<li>
Item
<ul class="sub-menu">
<li>
Item
</li>
</ul>
</li>
</ul>
</li>
</ul>
Any ideas of how to amend my code? Currently when I click the item within the two sub-menu then the parent sub-menu closes.
Try with this simplified handler:
$('.mobile li > a').click(function() {
$(this).siblings('.sub-menu').slideToggle(200);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-main-menu" class="mobile">
<li>
Item
<ul class="sub-menu">
<li>
Item
<ul class="sub-menu">
<li>
Item
</li>
</ul>
</li>
</ul>
</li>
</ul>
Related
I have a dropdown menu that on click, displays a submenu of list items.
Everything works great except the PARENT 2 submenu, if active, does NOT turn off if I click on the PARENT 3 link with a dropdown.
$(function () {
$('nav ul li a:not(:only-child)').click(function (e) {
$(this).siblings('.nav-dropdown').toggle();
$('.dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
$('html').click(function () {
$('.nav-dropdown').hide();
});
});
So if I click PARENT 2, the dropdown appears. If I then click PARENT 3, its dropdown also appears (and I need PARENT 2 dropdown to disappear). How to make sure that any menu item clicked removes any instance of an open submenu?
<nav>
<ul class="nav_links">
<li>Parent 1</li>
<li>Parent 2
<ul class="nav-dropdown">
<li>
Child 1
</li>
<li>
Child 2
</li>
</ul>
</li>
<li>Parent 3<i class="fa-solid fa-angle-down"></i>
<ul class="nav-dropdown">
<li>
Child 1
</li>
<li>
Child 2
</li>
</ul>
</li>
<li>Parent 4</li>
</ul>
</nav>
Your problem was that there isn't any element with the class dropdown.
So $('.dropdown').not($(this).siblings()).hide(); didn't work.
Try this:
$(function() {
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
$('html').click(function() {
$('.nav-dropdown').hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<ul class="nav_links">
<li>Parent 1</li>
<li>Parent 2
<ul class="nav-dropdown">
<li>
Child 1
</li>
<li>
Child 2
</li>
</ul>
</li>
<li>Parent 3<i class="fa-solid fa-angle-down"></i>
<ul class="nav-dropdown">
<li>
Child 1
</li>
<li>
Child 2
</li>
</ul>
</li>
<li>Parent 4</li>
</ul>
</nav>
I'm creating a sub menu using jquery. I have made the code as below. But there is still something that is not working properly. What I want is, when the start, the menu is closed. Currently, all menus are open. How do I do it, can anyone help me?
$('.list-menu > li').click(function () {
var child = $(this).children('ul');
if(child.length===0){
$(this).children().addClass("active");
return;
}
$('.list-menu ul').not(child).slideUp('normal');
child.slideDown('normal');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-menu">
<li class="menu-1">
Getting Started
<ul class="submenu">
<li id="sub-1">Child 1
</li>
<li id="sub-2">Child 2
</li>
</ul>
</li>
<li class="menu-2">
Controlling How Data is Indexed
<ul class="submenu">
<li id="sub-3">Child 1
</li>
<li id="sub-4">Child 2
</li>
</ul>
</li>
<li class="menu-3">
Uploading and Indexing Data
<ul class="submenu">
<li id="sub-5">Child 1
</li>
<li id="sub-6">Child 2
</li>
</ul>
</li>
<li>
<a href="#">
Querying For More Information
</a>
</li>
</ul>
You can set the child ul elements to display: none on page load using CSS:
ul > li > ul { display: none; }
$('.list-menu > li').click(function() {
var child = $(this).children('ul');
$(this).children().addClass("active");
$('.list-menu ul').not(child).slideUp('normal');
child.slideToggle('normal');
});
ul > li > ul { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-menu">
<li class="menu-1">
Getting Started
<ul class="submenu">
<li id="sub-1">Child 1
</li>
<li id="sub-2">Child 2
</li>
</ul>
</li>
<li class="menu-2">
Controlling How Data is Indexed
<ul class="submenu">
<li id="sub-3">Child 1
</li>
<li id="sub-4">Child 2
</li>
</ul>
</li>
<li class="menu-3">
Uploading and Indexing Data
<ul class="submenu">
<li id="sub-5">Child 1
</li>
<li id="sub-6">Child 2
</li>
</ul>
</li>
<li>
Querying For More Information
</li>
</ul>
I am attempting to create a pure CSS multi-level dropdown menu. I got it to work for hovering. However, I only want it to hover in the submenu, but the main menu item to be clickable to expand the menu. I tried to add jquery to override the hovering to clickable action, but it's not working. What am I doing wrong?
<nav class="nav">
Home
<li class="menu-item subItem">Menu1<b class="down-arrow"></b>
<ul class="submenu">
<li class="menu-item">Menu Item 1</li>
<li class="menu-item subItem">Submenu <b class="right-arrow"></b></span>
<ul class="submenu">
<li class="menu-item">Sub1</li>
<li class="menu-item">Sub2</li>
<li class="menu-item subItem">3rd Level <b class="right-arrow"></b></span>
<ul class="submenu">
<li class="menu-item">Level1</li>
<li class="menu-item">Level2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<script>
$(function() {
$('.menu-item').on('click',function(e) {
e.preventDefault();
$('.submenu').show();
});
});
</script>
I'm working on a navigation with 3 levels and want use toggle to expand and close those levels. I got it to work with the second level but am struggling with the third level.
I want the third level(purpose1,purpose2) to open when the second level(Purpose) is clicked.
<ul>
<li class="dropdown">About Us
<ul>
<li>Services</li>
<li>History</li>
</ul>
</li>
<li class="dropdown">Products
<ul class="products">
<li>Series</li>
<li>Purpose</li>
</ul>
<ul>
<li>purpose1</li>
<li>purpose2/li>
</ul>
</li>
</ul>
Javascript:
$('li.dropdown').click(function(){
$('li.dropdown').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
$('ul.products').click(function() {
$('ul.products').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
I've created a fiddle to illustrate the issue. The actual navigation is much more complex but this should do the job. Any suggestiones are really appreciated!
Your html is wrong. If the third lvl is to be displayed by clicking "purpose" it shoudl look like this:
<li class="dropdown">Products
<ul class="products">
<li>Series</li>
<li >Purpose
<ul >
<li>Series123</li>
<li>Series456</li>
</ul>
</li>
</ul>
</li>
Then just add a class to this thrid lvl list parent and add the jquery fucntion.
clicking in the product li is propagating up to the top level, which is causing the close.
$('ul.products').click(function(e) {
$('ul.products').not(this).find('ul').hide();
$(this).find('ul').toggle();
e.stopPropagation();
});
.
<ul>
<li class="dropdown">About Us
<ul>
<li>Services</li>
<li>History</li>
</ul>
</li>
<li class="dropdown">Products
<ul class="products">
<li>Series
<ul>
<li>Series123</li>
<li>Series456</li>
</ul>
</li>
<li>Purpose
<ul>
<li>purpose1</li>
<li>purpose2</li>
</ul>
</li>
</ul>
</li>
</ul>
here is the simplified working version, first move you 3rd level ul inside the li
<ul>
<li class="dropdown">About Us
<ul>
<li>Services</li>
<li>History</li>
</ul>
</li>
<li class="dropdown">Products
<ul class="products">
<li>Series
<ul>
<li>Series123</li>
<li>Series456</li>
</ul>
</li>
<li>Purpose</li>
</ul>
</li>
</ul>
and here goes the jQuery snippet -
$('li.dropdown a').click(function(){
$('li.dropdown').not(this).find('ul').hide();
$(this).parent('li').find('ul').toggle();
});
$('li.dropdown ul li').click(function() {
$(this).find('ul').toggle();
});
Check the working fiddle
I have a nested ul to make a sub menu. I want a click event to show the child ul and keep the others collapsed.
HTML
<div class="sideMenu">
<ul>
<li class="titledUl"><b>Dashboard</b>
</li>
<ul class="subUl">
<li>Dash Tool 1
</li>
<li class="subUl">Dash Tool 2
</li>
</ul>
</ul>
<ul>
<li class="titledUl"><b>User Managment</b>
</li>
<ul class="subUl">
<li>UM Tool 1
</li>
<li>UM Tool 2
</li>
</ul>
</ul>
</div>
jQuery
$( document ).ready(function() {
console.log( "ready!" );
$('.titledUl').click(function() {
console.log('clicked')
$(this).closest('.subUl').show();
console.log("should show")
});
});
It shows all my console logs when I click on the parent ul. (also the sub uls are hidden using css display none)
Thanks!
Hello your job done here: http://jsfiddle.net/webcarvers/RYvGv/
HTML:
<div class="sideMenu">
<ul>
<li class="titledUl"><b>Dashboard</b>
<ul class="subUl">
<li>Dash Tool 1</li>
<li>Dash Tool 2</li>
</ul>
</li>
</ul>
<ul>
<li class="titledUl"><b>User Managment</b>
<ul class="subUl">
<li>UM Tool 1</li>
<li>UM Tool 2</li>
</ul>
</li>
</ul>
</div>
CSS:
.subUl{
display:none;
}
.titledUl{
cursor:pointer;
}
JS:
$(document).ready(function(){
$('.titledUl').on('click', function() {
$(this).closest('ul').find(".subUl").slideToggle(500);
});
});
I got it working with the help of you all. Thank you!
New HTML
<div class="sideMenu">
<ul>
<li class="titledUl"><b>Dashboard</b>
<ul class="subUl">
<li>Dash Tool 1
</li>
<li class="subUl">Dash Tool 2
</li>
</ul>
</li>
</ul>
<ul>
<li class="titledUl"><b>User Managment</b>
<ul class="subUl">
<li>UM Tool 1
</li>
<li>UM Tool 2
</li>
</ul>
</li>
</ul>
</div>
New jQuery
$( document ).ready(function() {
console.log( "ready!" );
$('.titledUl').click(function() {
console.log('clicked');
$(this).children().show();
console.log("should show");
});
});