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>
Related
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 jQuery question.
I have a multiple groups of images which show / hide by clicking some corresponding links. The markup looks like this:
<div class="feature-wrap">
<!-- my menu -->
<div class="item-select-list-wrap">
<ul class="item-select-list">
<li><a class="feature-link" data-category="feature01" href="#">Item 1</a></li>
<li><a class="feature-link" data-category="feature02" href="#">Item 2</a></li>
</ul>
</div>
<!-- images for toggling -->
<ul class="item-select-image">
<li class="fadeitem feature-slide feature01"><img src="myimage.jpg"/></li>
<li class="fadeitem feature-slide feature02"><img src="myimage.jpg"/></li>
</ul>
</div>
There's some CSS to hide things by default:
.item-select-image li {display: none;}
.item-select-image li:last-child {display: block;}
And here's the jQuery:
$('.feature-link').click(function(event) {
event.preventDefault();
var feature = $(this).data('category');
$('.fadeitem').hide();
$('.' + feature).fadeIn(500);
$('.feature-link').removeClass('current');
$('.feature-link.' + feature).addClass('current');
});
This works fine, until I add another block:
<div class="feature-wrap">Another set of this</div>
because the all the 'fadeitem's on the page will disappear. My question: how can I best target only the items within this group?
Here's a pen: http://codepen.io/regmtait/pen/NdLqvP
You should use the current object this to target the parent feature-wrap, check the snippet below.
Hope this helps.
$('.feature-link').click(function(event) {
event.preventDefault();
var feature = $(this).data('category');
var parent = $(this).closest('.feature-wrap');
$('.fadeitem', parent).hide();
$('.' + feature).fadeIn(500);
$('.feature-link', parent).removeClass('current');
$('.feature-link.' + feature, parent).addClass('current');
});
.item-select-image li {display: none;}
.item-select-image li:last-child {display: block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feature-wrap">
<h2>First set of images</h2>
<!-- my menu -->
<div class="item-select-list-wrap">
<ul class="item-select-list">
<li><a class="feature-link" data-category="feature01" href="#">Item 1</a></li>
<li><a class="feature-link" data-category="feature02" href="#">Item 2</a></li>
<li><a class="feature-link" data-category="feature03" href="#">Item 3</a></li>
</ul>
</div>
<!-- images for toggling -->
<ul class="item-select-image">
<li class="fadeitem feature-slide feature01"><img src="http://placehold.it/200x100/00ff00"/></li>
<li class="fadeitem feature-slide feature02"><img src="http://placehold.it/200x100/ffff00"/></li>
<li class="fadeitem feature-slide feature03"><img src="http://placehold.it/200x100/ff00ff"/></li>
</ul>
</div>
<div class="feature-wrap">
<h2>Second set of images</h2>
<!-- my menu -->
<div class="item-select-list-wrap">
<ul class="item-select-list">
<li><a class="feature-link" data-category="feature04" href="#">Item 4</a></li>
<li><a class="feature-link" data-category="feature05" href="#">Item 5</a></li>
<li><a class="feature-link" data-category="feature06" href="#">Item 6</a></li>
</ul>
</div>
<!-- images for toggling -->
<ul class="item-select-image">
<li class="fadeitem feature-slide feature04"><img src="http://placehold.it/200x100/00ff00"/></li>
<li class="fadeitem feature-slide feature05"><img src="http://placehold.it/200x100/ffff00"/></li>
<li class="fadeitem feature-slide feature06"><img src="http://placehold.it/200x100/ff00ff"/></li>
</ul>
</div>
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();
}
});
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