I designed a menu for WordPress as follows:
HTML:
<aside class="menu">
<ul>
<li>
Main
<ul>
<li>
**** Under the first menu ****
<li>
Content first
</li>
<li>
Content second
</li>
<li>
Content third
<ul>
<li>
**** Under the second menu ****
<li>
Content first
</li>
<li>
Content second
</li>
<li>
Content third
</li>
</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
<aside>
CSS:
.menu > ul > li > ul {
display: none;
}
And using this script code, I have defined a condition that by clicking on li, if there is ul in it, it will be displayed:
$('.menu').find('li').click(function(evt) {
evt.stopPropagation();
$(this).children('ul').toggle();
});
This code works fine; But when several other li are used inside the li, the condition I put will no longer work and only the first sub-menu will be displayed.
Is there a way to make my script code work properly?
My problem is only related to the script code.
If you want to just have the 2nd level of the menu visible after opening, you need to do your CSS like this:
.menu > ul > li > ul {
display: none;
}
This way you will be selecting direct children of the elemen, more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
However, if you also want for the 2nd level of menu to be open on click, you need to move your <ul> and put it directly with your <li>, like this:
<aside class="menu">
<ul>
<li>
Main
<ul>
<li>
**** Under the first menu ****
<li>
Content first
</li>
<li>
Content second
</li>
<li>
Content third
<ul>
<li>
**** Under the second menu ****
<li>
Content first
</li>
<li>
Content second
</li>
<li>
Content third
</li>
</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
</aside>
and change your CSS to this:
.menu ul > li > ul {
display: none;
}
You should move the ul content you want to be toggleable into the clickable li:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.menu ul li ul {
display: none;
}
</style>
</head>
<body>
<div id="app"></div>
<aside class="menu">
<ul>
<li>
Main
<ul>
<li>
**** Under the first menu ****
<li>
Content first
</li>
<li>
Content second
</li>
<li>
Content third
<ul>
<li>
**** Under the second menu ****
<li>
Content first
</li>
<li>
Content second
</li>
<li>
Content third
</li>
</li>
</ul>
</li>
</li>
</ul>
</li>
</ul>
<aside>
</body>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>
<script >
$('.menu').find('li').click(function(evt) {
evt.stopPropagation();
$(this).children('ul').toggle();
});
</script>
</html>
Related
Im trying to hide li if has no have li
Here html :
<li>
My Profile
<ul>
<li>Profile</li>
<li>Edit Profile</li>
</ul>
</li>
<li>
Menu must be hide
<ul>
</ul>
</li>
Get all the ul iterate through them to get the content and if no conetent is available then use parentNode to get the parent li and add class to the parent to hide it
const allULs = document.querySelectorAll("ul");
allULs.forEach(function(a) {
0 === a.innerHTML.trim().length &&
a.parentElement.classList.add("hideParent");
});
.hideParent {
display: none;
}
<li>
My Profile
<ul>
<li>Profile</li>
<li>Edit Profile</li>
</ul>
</li>
<li>
Menu must be hide
<ul>
</ul>
</li>
I have a ul list that I added toggle to using Javascript
and set display to none using CSS and everything is working fine.
I am looking for the javacript to make the link display (not collapsed) on the next page
when the links under the parent menu is clicked. So they are collapsed by default but when any of the links
clicked and the page loads, the links would not be collapsed as it was initially when the page was first visited.
Here's my current markup
<ul>
<li>
Main Title
<ul>
<li>
link 1
</li>
<li>
link 2
</li>
<li>
link 3
</li>
</li>
</ul>
</ul>
<style>
ul li ul {
display: none;
}
</style>
<script>
$('li').click(function (e) {
$(this).children('ul').slideToggle();
e.stopPropagation();
});
</script>
JQuery Code
<script>
$(document).ready(function(){
$("#hideshow").hide(); //By Default li is hide
$("ul").click(function(){
$("#hideshow").slideToggle(1000);
});
});
</script>
HTML Code
<body>
<ul><li>Hide </li></ul>
<ul id="hideshow">
<li>link 1 </li>
<li> a href="#">link 2 </a></li>
<li>link 3 </li>
</ul>
</body>
This is a multilevel menu. When i click the link "About" it opens the submenu which contains 3 links Johnny, Julie & Jamie.
When i click "About" again, it closes the menu. Clicking the submenu also closes the menu, and that i want to avoid.
How do i avoid closing the opened submenu, if i click the submenu (Johnny, Julie & Jamie) ?
$('li.parent').click(function() {
$(this).find('.sub-nav').toggleClass('visible');
});
#nav ul.sub-nav {
display: none;
}
#nav ul.visible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="nav">
<li class="parent">About
<ul class="sub-nav">
<li>Johnny
</li>
<li>Julie
</li>
<li>Jamie
</li>
</ul>
</li>
<li class="parent">AnotherLink
<ul class="sub-nav">
<li>Martin
</li>
<li>Rasmus
</li>
<li>Morten
</li>
</ul>
</li>
</ul>
Alternative to stopPropagation approach for child elements would be adding a small check if the clicked element is the current one (and not it's descendants):
$('li.parent').click(function(e) {
if (this === e.target)
$(this).find('.sub-nav').toggleClass('visible');
});
$('li.parent').click(function(e) {
if (this === e.target)
$(this).find('.sub-nav').toggleClass('visible');
});
#nav ul.sub-nav {
display: none;
}
#nav ul.visible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="nav">
<li class="parent">About
<ul class="sub-nav">
<li>Johnny
</li>
<li>Julie
</li>
<li>Jamie
</li>
</ul>
</li>
<li class="parent">AnotherLink
<ul class="sub-nav">
<li>Martin
</li>
<li>Rasmus
</li>
<li>Morten
</li>
</ul>
</li>
</ul>
You need to stopPropagation of event on child anchor elements:
$("li.parent a").click(function(e) {
e.stopPropagation();
});
You need to prevent the click on the .sub-nav element to be transmitted to your event handler: https://api.jquery.com/event.stoppropagation/
I have toggle tree which responds on click i.e. show or hide UL>li. I want to hide all the UL --> li who has parent ul-li. To make it more obvious I have apply css background-color to red which I want to be hidden by when page loads but show when it click back.
https://jsfiddle.net/toxic_kz/vr84pd6u/
<div>
<ul class="treeview">
<li><a>System Administration</a></li>
<li>
<a>System Core</a>
<ul>
<li><a>f2</a></li>
<li>
<a>f3</a>
<ul>
<li><a>f4</a></li>
<li><a>f5</a></li>
<li><a>f6</a></li>
</ul>
</li>
<li>
<a>f7</a>
<ul>
<li>
<a>f8</a>
<ul>
<li>
<a>f10</a>
<ul>
<li><a>f11</a></li>
</ul>
</li>
</ul>
</li>
<li><a>f9</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a>MyFunctionA</a>
<ul>
<li>
<a>f12</a>
<ul>
<li><a>f13</a></li>
<li><a>f14</a></li>
</ul>
</li>
<li><a>f16</a></li>
</ul>
</li>
<li><a>Course Management</a></li>
</ul>
</div>
jQuery
<script type="text/javascript">
$(document).ready(function () {
$('.treeview li').each(function () {
if ($(this).children('ul').length > 0) {
$(this).addClass('parent');
}
});
// $('.treeview li.parent>ul li').css('display', 'none');
$('.treeview li.parent>ul li').css('background-color', 'red');
$('.treeview li.parent > a').click(function () {
$(this).parent().toggleClass('active');
$(this).parent().children('ul').slideToggle('fast');
});
});
</script>
If I understood your question correctly, this is what you want:
$(".treeview").find('ul').hide()
Place this in your $(document).ready function and it'll hide the underlying unordered list upon page load.
how i can get "Goods" when i click under "Goods" link "Restricted","Open" similarly when how i can get "Services" when i click under "Services" link "Restricted","Open" similarly,thanks in advance
JavaScript:
$('.goodsLink li a').click(function(){
alert( $('#nav li ul li a').html());
return false;
});
HTML:
<ul id="nav">
<li>Create a New Tender
<ul>
<li><strong>+</strong> Goods
<ul>
<li><strong>-</strong> Single
<ul class="goodsLink">
<li> - Restricted
</li>
<li> - Open
</li>
</ul>
</li>
<li><strong>-</strong> Framework
<ul class="goodsLink">
<li> - Restricted
</li>
<li> - Open
</li>
</ul>
</li>
</ul>
</li>
<li><strong>+</strong> Services
<ul>
<li><strong>-</strong> Single
<ul class="servicesLink">
<li> - Restricted
</li>
<li> - Open
</li>
</ul>
</li>
<li><strong>-</strong> Framework
<ul class="servicesLink">
<li> - Restricted
</li>
<li> - Open
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
You can use something like this:
$('.goodsLink li a').click(function() {
alert( $(this).parents('li:contains("+")').children("a:first").text());
return false;
});
But the best way should be for you to use a class or tribute to better identify the element you want to find. That way you cold replace the :contains("+") with a .topParent
She this examples:
example with contains
example with class