Close all open ul when another ul is toggled by click event - javascript

I've got a vertical dropdown menu for which I'm using jQuery toggle to open/close the submenus.
It's working fine when the user clicks the parent item (for example 'About' the submenu opens and when they click it again the submenu closes again. However, if they don't click the parent item ('About') a second time to close it but click on a different parent item (let's say 'Industry') to open the submenu both submenus ('About' and 'Industry') are visble.
So I need it to work that 'About' automatically closes when 'Industry' is clicked.
Here is the code :
<nav>
<ul id="nav-list">
<li class="nav-list_item nav-about>About
<div id="about-drop">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-industry">Industry
<div id="industry-drop">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-application">Application
<div id="application-drop">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
</ul>
And the JavaScript:
$('li.nav-about').click(function () {
$(this).find('ul').toggle();
});
$(' li.nav-industry').click(function () {
$("html, body").animate({ scrollTop: 0 }, "fast");
$(this).find('ul').toggle();
});
$('li.nav-application').click(function () {
$("html, body").animate({ scrollTop: 0 }, "fast");
$(this).find('ul').toggle();
});
I've tried different things I found on stackoverflow already but could'nt get it to work. Any suggestions?


$('#nav-list li').on('click', function() {
$('#nav-list li').not(this).find('div').hide();
$(this).find('div').toggle();
});
.nav-list_item > div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav-list">
<li class="nav-list_item nav-about">About
<div id="about-drop ">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-industry">Industry
<div id="industry-drop ">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-application">Application
<div id="application-drop ">
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</li>
</ul>
No need for so convoluted handlers.


demo
$('li.nav-about').click(function () {
$(this).find('ul').toggle();
$(this).siblings('li').find('ul').hide();
});
$(' li.nav-industry').click(function () {
$("html, body").animate({
scrollTop: 0
}, "fast");
$(this).find('ul').toggle();
$(this).siblings('li').find('ul').hide();
});
$('li.nav-application').click(function () {
$("html, body").animate({
scrollTop: 0
}, "fast");
$(this).find('ul').toggle();
$(this).siblings('li').find('ul').hide();
});
Just hide the other div when one is click.


I think you can remove redundant code like this:
$('li.nav-list_item').click(function () {
$('li.nav-list_item').find('ul').hide();
$("html, body").animate({ scrollTop: 0 }, "fast");
$(this).find('ul').toggle();
});
You can substitute your js with this.

Related

Scroll to javascript

So this is what I have as my top nav bar. I'm using this along with jquery
<nav>
<div class="brand">BRAND</div>
<ul>
<li><a id="home" href="#home">Home</a></li>
<li><a id="about" href="#about">About</a></li>
<li><a id="buy" href="#buy">Buy</a></li>
<li><a id="contact" href="#contact">Contact</a></li>
<li><a id="login" class="active" href="#">Log In</a></li>
</ul>
</nav>
and i'm trying to use this line of code to have it when clicked on one of the options on my nav bar to scroll to that element
$("nav a").on("click", function(e) {
e.preventDefault();
var section = $(this).attr("href");
$("html, body").animate({
scrollTop: $(section).offset().top
}, 850);
});
but it isn't working?

You have to put the id to thelement you want to scroll to not the link itself
$("nav a").on("click", function(e) {
e.preventDefault();
var section = $(this).attr("href");
$("html, body").animate({
scrollTop: $(section).offset().top
}, 850);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="brand">BRAND</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Buy</li>
<li>Contact</li>
<li><a class="active" href="#">Log In</a></li>
</ul>
</nav>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="home">
example
</div>

You've put the ids on the wrong elements. Each of your links is set to target itself -- so the browser scrolls to the link that was just clicked, which is already visible.
Place id="…" on the element that you want to scroll to, not the link.

jQuery animation doesn't work for my navbar

I have a navigation menu on top of my page made out of list items. I want to apply jQuery code to make the list items to slide down one by one when my page loads...Can't get it work.
index.html
<div class="container">
<ul>
<li id="goFirst">Projects</li>
<li id="goSecond">Contact</li>
<li id="goThird">Blog</li>
</ul>
</div>
script.js
$(document).ready(function() {
$('#goFirst').animate({top: '+=75px'}, 1000);
$('#goSecond').delay(1000).animate({top: '+=75px'}, 1000);
$('#goThird').delay(2000).animate({top: '+=75px'}, 1000);
});

Use marginTop instead of top.
$(document).ready(function() {
$('#goFirst').animate({
marginTop: '+=75px'
}, 1000);
$('#goSecond').delay(1000).animate({
marginTop: '+=75px'
}, 1000);
$('#goThird').delay(2000).animate({
marginTop: '+=75px'
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<ul>
<li id="goFirst">
Projects
</li>
<li id="goSecond">
Contact
</li>
<li id="goThird">
Blog
</li>
</ul>
</div>

toggleclass active doesn't work properly

I want the menu to work like this. When you click Main1 it becomes active and the list will show, when you click it again the list will hide. When Main1 is active and you click Main2, then the Main1 should be inactive and Main2 active.
But my Javascript doesn't seem to make it work well. It makes the Main1 inactive when you click Main2 and the other way, but if you click on any of the active Main it doesn't become incactive. Please help
<div class="directory-section-list">
<ul class="list_item">
<li class="li_lvl lvl0" id="bx_1847241719_2">Main1</li>
<ul>
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
<ul>
<li>FD 15</li>
<li>FD 18</li>
</ul>
</ul>
<ul class="list_item">
<li class="li_lvl lvl0" id="bx_1847241719_2">Main2</li>
<ul>
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
<ul>
<li>FD 15</li>
<li>FD 18</li>
</ul>
</ul >
</div>
Javascript
$(' .list_item .lvl0').click(function(){
$(".list_item.active").removeClass("active");
$(this).parent().toggleClass('active');
});
$(' .list_item .lvl1').click(function(){
$(this).parent().toggleClass('active');
});

Try this,
$('.list_item .lvl0').click(function(){
$('.directory-section-list .active').removeClass('active');
if ($(this).parent().hasClass('active'))
{
$(this).parent().removeClass('active');
}
else
{
$(this).parent().addClass('active');
}
});
$('.list_item .lvl1').click(function(){
$(this).parent().toggleClass('active');
});

Please try this
HTML
<div class="directory-section-list">
<ul class="list_item">
<li class="li_lvl lvl0" id="bx_1847241719_2">Main1</li>
<ul>
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
<ul>
<li>FD 15</li>
<li>FD 18</li>
</ul>
</ul>
</ul>
<ul class="list_item">
<li class="li_lvl lvl1" id="bx_1847241719_2">Main2</li>
<ul>
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
<ul>
<li>FD 15</li>
<li>FD 18</li>
</ul>
</ul>
</ul>
</div>
Java Script
$(' .list_item .lvl0').click(function () {
$(' .list_item .lvl1').parent().removeClass("active");
$(this).parent().toggleClass('active');
});
$(' .list_item .lvl1').click(function () {
$(' .list_item .lvl0').parent().removeClass("active");
$(this).parent().toggleClass('active');
});

Sorry but your HTML List had a couple of errors the
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
will never be closed...
its all about the HTML Structure - i've done another change -> check the HTML Structure of this JS Fiddle: http://jsfiddle.net/marco_rensch/hzu76hgt/32/

I think you want something like this?
$(document).ready(function(){
$('.maindiv').hide();
$( "button" ).click(function() {
$('.maindiv[data-link=' + $(this).data('link') + ']').toggle("fade",300);
});
});
div {
background-color: green;
color: white;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button class="show" data-link="main1">Main1</button>
<button class="show" data-link="main2">Main2</button>
<div>
<div class="maindiv" data-link="main1">
<h1>This is main1</h1>
</div>
<div class="maindiv" data-link="main2">
<h1>This is main2</h1>
</div>
</div>

Well Thank you all for your help. I managed to do it taking some of your examples and making it work my own way. Thank you again. I will post the Javascript fix.
$(document).ready(function() {
$('.li_lvl').click(function () {
if ($(this).parent().hasClass('active')) {
$(this).parent().removeClass('active');
}
else {
$('.directory-section-list .active').removeClass('active');
$(this).parent().addClass('active');
}
});
This will toggle class active of the parent .li_lvl which is the ul.list_item. If parent has class active it will remove class active. If any other list_item will have class active whilst you click on the other list_item, it will remove class active on the other list_item and make class active on the list_item you clicked.

adding class active to submenu after reloading page

After clicking the li item, i added the active class with js but it leads to the other page and the active class disappears.
I am using bootstap navwalker so don't know how to use php code into it.
<div id="cssmenu" class="right-tabs">
<ul>
<li></li>
<li>
<ul role="menu" class=" dropdown-menu">
<li>link</li>
</ul>
</li>
<li>page</li>
</ul>
</div>
JS
$(document).ready(function(){
$(".dropdown-menu > li").click(function () {
$(this).siblings().removeClass("active");
$(this).addClass("active");
});
});

Could you just add the class based on the url?
Example assuming your on a about page
$(function() {
var loc = window.location.href; // returns the full URL
if(/about/.test(loc)) {
$('.dropdown-menu > li .about').addClass('active');
}
});

in link.php, add active class
<div id="cssmenu" class="right-tabs">
<ul>
<li></li>
<li class="activeClass">
<ul role="menu" class=" dropdown-menu">
<li>link</li>
</ul>
</li>
<li>page</li>
</ul>

Multiple hidden menus that open and close using jQuery?

please see this fiddle http://jsfiddle.net/rabelais/tw6sdod9/
$(document).ready(function() {
$('li ul').slideUp(0);
$('.no-js li a').on("click", function() {
$('ul#inner-li ul').slideUp(400);
if ($(this).siblings('ul').is(":visible"))
$(this).siblings('ul').slideUp(400);
else
$(this).siblings('ul').slideDown(400);
});
});
$('#nav li a').on('click', function() {
$('li a.current').removeClass('current');
$(this).addClass('current');
});
$(document).ready(function() {
$('li ul#inner-li-texts').slideDown(0);
$('.no-js li a#texts').on("click", function() {
$('ul ul').slideUp(400);
if ($(this).siblings('ul').is(":visible"))
$(this).siblings('ul').slideUp(400);
else
$(this).siblings('ul').slideDown(400);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="no-js">
<li class="caps">Works
<ul id="inner-li">
<li>blog
</li>
<li>Portraits
</li>
<li>Paintings
</li>
<li>Drawings
</li>
<li>Photography
</li>
</ul>
</li>
<li class="caps"><a id="texts" href="#">Texts</a>
<ul id="inner-li-texts">
<li><a class="current" href="#essay-one">Essay one</a>
</li>
<li>Essay two
</li>
<li>Essay three
</li>
</ul>
</li>
<li class="caps">News
</li>
<li class="caps">Biography
</li>
</ul>
On this fiddle there is a menu with two sub-menus hidden under the 'Works' and 'Text' links.
What I am trying to achieve is this:
On load I want the text sub menu open and the works menu closed.
When the users clicks on either link the sub menu to that link opens or closes.
$(document).ready(function () {
$('li ul').slideUp(0);
$('.no-js li a').on("click", function () {
$('ul#inner-li ul').slideUp(400);
if($(this).siblings('ul').is(":visible"))
$(this).siblings('ul').slideUp(400);
else
$(this).siblings('ul').slideDown(400);
});
});

Updated the Jsfiddle
HTML
<ul class="no-js">
<li class="caps"><a class="alink" href="#">Works</a>
<ul class="cls" id="inner-li">
<li>blog</li>
<li>Portraits</li>
<li>Paintings</li>
<li>Drawings</li>
<li>Photography</li>
</ul></li>
<li class="caps"><a id="texts" class="alink" href="#">Texts</a>
<ul class="cls" id="inner-li-texts">
<li><a class="current" href="#essay-one">Essay one</a></li>
<li>Essay two</li>
<li>Essay three</li>
</ul>
</li>
<li class="caps"><a class="alink" href="../news.htm">News</a></li>
<li class="caps"><a class="alink" href="../biography.htm">Biography</a></li>
</ul>
Script
$(document).ready(function () {
$('ul.cls').slideUp(0);
$('a.alink').on("click", function () {
$(this).next("ul.cls").slideToggle(400);
});
});
Worked for me
Hope this helps.

Why were you adding a second click handler to #texts? There's one click handler here:
$('.no-js li a').on("click", function () {
//...
});
But then there's another one here:
$('.no-js li a#texts').on("click", function () {
//...
});
So while clicking on any other menu invokes only the first handler, clicking on #texts invokes both. It looks like you only want the first.

You add two times a click-listener for your menu.
I updated the FIDDLE
Just removed the duplicated code and added:
jQuery('#texts').click();

Categories