How to close the menu one by one when clicked again - javascript

I have a menu with three levels of nesting. I open each one in turn with the following code:
$(".menu-item-has-children").click(function(event) {
event.preventDefault();
$(this).children(".sub-menu").slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="menu-item-has-children">
<a>About</a>
<ul class="sub-menu">
<li>
<a>Subitem1</a>
</li>
<li class="menu-item-has-children">
<a>Subitem2</a>
<ul class="sub-menu">
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<a>Subitem3</a>
</li>
</ul>
</li>
The first level of nesting opens well. And when I try to open the next level, the previous one closes. And when I open it again, the next one is open. How can I fix this and make it possible to open and close the menu one by one?

Use event.stopPropagation(); instead of event.preventDefault();.
stopPropagation stops the current event from spreading further during the capturing and bubbling stages.
Example:
$(".menu-item-has-children").click(function(event) {
//event.preventDefault();
event.stopPropagation();
$(this).children(".sub-menu").slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="menu-item-has-children">
<a>About</a>
<ul class="sub-menu">
<li>
<a>Subitem1</a>
</li>
<li class="menu-item-has-children">
<a>Subitem2</a>
<ul class="sub-menu">
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li>
<a>Subitem3</a>
</li>
</ul>
</li>

Related

How to override hover event to click event for CSS dropdown menu

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>

Nested collapse

I'm trying to collapse a nested menu with jQuery. I read this answer and, to me, it appears to be similar to my solution. The problem is that mine doesn't work.
What I think I'm saying with my JavaScript code is: "hey, when a user clicks on a li that is the parent of a ul.submenu, get its ul.submenu children and attach the slideToggle only to it". But, as you can see from the snippet, it closes also the parent ul.submenu and I can't understand why.
$(document).ready(function () {
$('.submenu').hide();
$('.submenu').parent('li').click(function () {
$(this).children('ul.submenu').slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="menu">
<li>Home</li>
<li>Blog
<ul class="submenu">
<li>
Author
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Category</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Tag</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Post</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
</ul>
</li>
<li>Photo</li>
<li>Settings</li>
</ul>
</nav>
You want to stop the click event from bubbling up the DOM and triggering the click handler on the parent. Use .stopPropagation() for that:
$(document).ready(function() {
$('.submenu').hide();
$('.submenu').parent('li').click(function(e) {
e.stopPropagation()
$(this).children('ul.submenu').slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="menu">
<li>Home</li>
<li>Blog
<ul class="submenu">
<li>
Author
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Category</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Tag</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Post</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
</ul>
</li>
<li>Photo</li>
<li>Settings</li>
</ul>
</nav>

Javascript toggle menu with multiple levels

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

In Twitter Bootstrap, how would I stop all the accordions from momentarily unfolding on page load?

With reference to the following page:
http://www.myorange.ca/theme/jarvisadmin/
Upon page loading, all of the accordions on the left momentarily unfold and then hide again. How can I stop this momentary unfolding as the page is loading?
Give all of the non open LI's that are suppose to be closed a class of closed
change your navigation html
add class="closed" in main li on which menu open
like
<ul class="menu" id="accordion-menu-js">
<li class="closed"><a href="javascript:void(0)"><i class="icon-off"></i>Dashboard <span
class="badge">2</span></a>
<ul>
<li>Dashboard </li>
<li>Logout
</li>
</ul>
</li>
<li class="closed"><a href="inbox.html" class="expanded"><i class="icon-envelope"></i>
Inbox</a> </li>
<li class=""><i class="icon-check"></i>Forms<span class="badge">3</span>
<ul>
<li>Form Elements </li>
<li>Validation </li>
<li>Wizards </li>
</ul>
</li>
<li class="closed"><a href="javascript:void(0)"><i class="icon-user"></i>Interface<span
class="badge">3</span></a>
<ul>
<li>Interface Elements </li>
<li>Buttons & Icons </li>
<li>Tables </li>
</ul>
</li>
<li class="closed"><a href="javascript:void(0)"><i class="icon-signal"></i>Charts &
Graphs<span class="badge">3</span></a>
<ul>
<li>Basic Charts </li>
<li>Advanced Charts </li>
<li>Raphael Engine </li>
</ul>
</li>
<li class="closed"><i class="icon-refresh"></i>Smart Widgets
</li>
<li class="closed"><a href="javascript:void(0)"><i class="icon-plus"></i>Bonus<span
class="badge">4</span></a>
<ul>
<li>Invoice </li>
<li>Typography </li>
<li>Chat </li>
<li>Error Page </li>
</ul>
</li>
</ul>

how can i make my nav bar with js

okay so i have a Nav bar, and now i want to make it when it loads the page, it builds the nav bar
<div id="nav">
<div id="nav_holder">
<ul>
<li class="first"> Home </li>
<li>Rules </li>
<ul class="drop">
<li>Help
<ul class="drop">
<li>Beginnen</li>
<li>Geld Verdienen</li>
<li>Protection Blocks</li>
<li>Trade Signs</li>
<li>Sign beveiliging</li>
<li>Item ID List</li>
</ul>
</li>
</ul></li>
<li>Donate </li>
<ul class="drop">
<li>Staff
<ul class="drop">
<li>Faircraft team</li>
<li>Solliciteren</li>
</ul>
</li>
</ul></li>
<li>Videos </li>
<li></li>
<li>Forum </li>
</ul>
<ul class="right">
<li class="first">Sign Up! </li>
</ul>
</div>
</div>
so i think i need this code
function holder()
{ // check if adding 1 exceeds number of pics in array
var build='<img border="0" src="'+picArray[picCount]+'" width="649">\n';
document.getElementById("nav_holder").innerHTML=build;
}
}
but then i need it to make the nav bar,
btw i need help with the body onload feature too:p, please help
Instead of window.onload, try using jQuery http://jquery.com/:
$(document).ready(function(){
// build menu
)};
this will execute when the DOM finishes loading.

Categories