I have a nested navigation bar in my site, and it already works, however, I want to close the collapsed bar when clicked outside the bar.
Here is the javascript code I have:
$(document).ready(function() {
$('#nav li').click(function() {
//slide up all the link lists
$(this).children('ul').slideToggle();
})
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="collapse navbar-collapse navbar-right" role="navigation">
<ul id="nav" class="nav navbar-nav">
<li class="current">Home
</li>
<li>About
<ul>
<li>Link1
</li>
<li>Link2
</li>
</ul>
</li>
<li>Etc
<ul>
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
</ul>
</li>
<li>Etc2
<ul>
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</nav>
you can use this code
$('body').on('click touchstart', function(e) {
if ($(".classname").is(":visible")) {
if ($(e.target).closest(".classname").length == 0 && !$(e.target).hasClass('active')) {
closeMobileMenu(menuobj);
}
}
});
What about something like this:
$(document).click(function(event) {
if(!$(event.target).closest('#nav').length) {
$('#nav li').children('ul').slideToggle();
}
});
Related
Here are the two scripts I am using
First one adds arrow after .a that has sub-menu, .has children
jQuery(function($) {
$('a + ul').prev('a').append('<span class="sub-menu-open">▼</span>');
});
This second opens sub-menu, but on menu a click.
jQuery(function($) {
$('.sub-menu').hide(); //Hide children by default
$('.menu').children('').click(function(){
event.preventDefault();
$(this).children('.sub-menu').slideToggle('slow');
});
});
this is html code.
<ul id="menu-izb" class="menu">
<li id="menu-item" class="bp-menu ">
Activity
</li>
<li id="menu-item" class="bp-menu">
Log Out
</li>
<li id="menu-item" class="menu-item"><a href="/">Blog
<span class="sub-menu-open">▼</span>
</a>
<ul class="sub-menu" style="">
...
How do I make sub-menu toggles onclick on <span class="sub-menu-open">▼</span>?
I don't know what your JS-Code is doing. But here is a solution for "opening sub menu on click on span":
<ul id="menu-izb" class="menu">
<li id="menu-item" class="bp-menu ">
Activity
</li>
<li id="menu-item" class="bp-menu">
Log Out
</li>
<li id="menu-item" class="menu-item has-children"><a href="">Blog
<span class="sub-menu-open">▼</span></a>
<ul class="sub-menu" style="">
<li id="menu-item" class="menu-item">
Bla1
</li>
<li id="menu-item" class="menu-item">
Bla2
</li>
<li id="menu-item" class="menu-item">
Bla3
</li>
</ul>
</li>
</ul>
<script>
jQuery(function($) {
$('.sub-menu').hide();
$('.sub-menu-open').parent().click(function(e){
e.preventDefault();
$(this).parent().find(".sub-menu").toggle();
});
});
</script>
Here is a working Fiddle:
https://jsfiddle.net/ehg49dso/9/
When I click on open it toggles all of the submenus. I want to toggle only the exact ul under the li.
$(document).ready(function(){
$(".has-children>a").click(function(event){
event.preventDefault();
});
$('.has-children').click(function() {
$(this).find('>ul').toggle(300);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li class="has-children">
open
<ul class="submenu" style="display:none">
<li class="has-children">
open
<ul class="submenu" style="display:none">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
</li>
</ul>
You can achieve this by changing find() to children() to target only direct children of the li.
$(document).ready(function(){
$(".has-children>a").click(function(event){
event.preventDefault();
});
$('.has-children').click(function() {
$(this).children('ul').toggle(300);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li class="has-children">
open
<ul class="submenu" style="display:none">
<li class="has-children">
open
<ul class="submenu" style="display:none">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
</li>
</ul>
This however causes a problem where clicking on children of children will close the menu, so instead you can use a tag and the jQuery next() function to toggle instead of children() or find() like this:
$(document).ready(function() {
$(".has-children>a").click(function(event) {
event.preventDefault();
$(this).next().toggle(300);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li class="has-children">
open
<ul class="submenu" style="display:none">
<li class="has-children">
open
<ul class="submenu" style="display:none">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
</li>
</ul>
This also makes your script much shorter.
I am working on a mobile menu for this site:
http://giamberardino.com/_beta/team.html
When I click on "Showcase" it's toggle the slide of the entire menu as well as .mbl-dropdown. I would like it to just toggle the slide of .mbl-dropdown when .mbl-showcase is clicked on.
Where am I going wrong??
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
$(".mobile_menu_button").bind('click', function() {
$('.mobile_menu').slideToggle();
});
$(".mbl-showcase").bind('click', function() {
$('.mbl-dropdown').slideToggle();
$('.mobile_menu').stop().slideToggle();
});
First, You have to make it clear in your mind:
you have to hide the dropdown menu NOT the whole navbar , so you need to give the .mbl-dropdown a display:none.
then you just want to make the jquery code like that :
$(".mbl-showcase").on('click', function() {
$('.mbl-dropdown').slideToggle();
});
.mbl-dropdown{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
that means if you click on the element with class .mbl-showcase wich is "Showcase" the dropdown will show if it is hidden and it will be hidden if it is shown and that what does toggle mean.
make sure you check again the toggle property http://api.jquery.com/toggle/
I hope I helped you
<nav class="mobile_menu">
<ul id="menuItems">
<li> Home </li>
<li><a href="company.html" > Company</a> </li>
<li class="mbl-showcase">Showcase
<ul class="mbl-dropdown">
<li>General Contracting</li>
<li>CUSTOMIZED MILLWORK</li>
<li>BUILDING RESTORATION</li>
</ul>
</li>
<li> Team </li>
<li><a href="careers.html" >Careers </a></li>
<li> Contact</li>
</ul>
</nav>
.mbl-showcase ul{
display:none;
}
$("#menuItems li").on('click', function() {
$(this).find(".mbl-dropdown").slideToggle()
});
Fiddler https://jsfiddle.net/zeqy9zfo/
I have a dropdown menu. I want it to be dynamic so I can only tell a li (in the nav) that it is a dropdown and then give it a list afterwards that is dropdown content. The problem is that when you click on a link with the .dropdown class it shows all elements with the .dropdown-content class. Any idea of a smart selector that would work here?
My HTML:
<li><a class="dropdown" href="#">Gallery</a>
<ul class="dropdown-content">
<li>Photos on me</li>
<li>Photos of me</li>
<li>Photos with me</li>
</ul>
</li>
<li><a class="dropdown" href="#">Blog</a>
<ul class="dropdown-content">
<li>Photos on me</li>
<li>Photos of me</li>
<li>Photos with me</li>
</ul>
</li>
My js:
var main = function() {
$('.dropdown').click(function(){
$('.dropdown + .dropdown-content').toggle(200);
});
}
Get the element on which click event has happened, and from that find the siblings class that you are looking for.
$('.dropdown').click(function(){
$(this).siblings('.dropdown-content').toggle(200);
});
OR
$('.dropdown').click(function(){
$(this).next().toggle(200);
});
Working Fiddle
Just include data and id to your code. This will resolve your problem.
JS Bin on jsbin.com
(function() {
$('.dropdown').click(function(e){
var id = $(this).data('toggle');
$('#' + id).toggle();
});
}());
.dropdown-content {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul>
<li><a class="dropdown" href="#" data-toggle="first">Gallery</a>
<ul class="dropdown-content" id="first">
<li>Photos on me</li>
<li>Photos of me</li>
<li>Photos with me</li>
</ul>
</li>
<li><a class="dropdown" href="#" data-toggle="second">Blog</a>
<ul class="dropdown-content" id="second">
<li>Photos on me</li>
<li>Photos of me</li>
<li>Photos with me</li>
</ul>
</li>
</ul>
</body>
</html>
I have a click handler on the "top level" <li>s that I want to hide all the content below the <li>s and then show the content below the particular <li> that was clicked.
The hiding works, but the showing does not.
$('.menu li').click(function() {
$('.submenu').hide();
var myclass = $('submenu');
$(this).show($submenu)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button>Menu</button>
<ul class="menu">
<li>Football
</li>
<li>cricket
<ul class="submenu">
<li>Shane
</li>
<li>Waqar
</li>
<li>Waseem
</li>
<li>Akhtar
</li>
</ul>
</li>
<li>Hockey
</li>
<li>Baseball
<ul class="submenu">
<li>Shane
</li>
<li>Waqar
</li>
<li>Waseem
</li>
<li>Akhtar
</li>
</ul>
</li>
<div class="clear"></div>
</ul>
</div>
Try this.
It hides the submenu with CSS.
Then it toggles the submenu when you click the list item.
If you only want one submenu to be shown at once, uncomment the line in the js.
$('.menu li').has('.submenu').click(function(e) {
e.preventDefault();
$(this).find('.submenu').slideToggle();
});
.submenu {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button>Menu</button>
<ul class="menu">
<li>Football</li>
<li>cricket
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<li>Hockey</li>
<li>Baseball
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<div class="clear"></div>
</ul>
</div>
You should try this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<button>Menu</button>
<ul class="menu">
<li>Football</li>
<li>cricket
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<li>Hockey</li>
<li>Baseball
<ul class="submenu">
<li>Shane</li>
<li>Waqar</li>
<li>Waseem</li>
<li>Akhtar</li>
</ul>
</li>
<div class="clear"></div>
</ul>
</div>
<script type="text/javascript">
$('.submenu').hide();
$(document).on("click",".menu li",function(){
$(this).find('.submenu').slideToggle();
});
</script>
You are using jQuery and there is toggle() function for show/hide toggle and use like this
$('.submenu').toggle();
and I fixed your script that doesn't work.
$('.menu li').click(function(){
$('.submenu').hide();
$(this).find('.submenu').show();
});
Working fiddle