JQuery - using same function (ToggleNav / Dropdown) on multiple ids
I am trying to make multiple dropdown menus in my site and I am using this jQuery to do this:
$(function() {
var pull = $('#pull');
menu = $('#nav');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});
Here's the html part:
<nav class="container">
<a href="#" id="pull" style="display:block;">
<h3>Menu</h3>
</a>
<ul id="nav" style="display:none;">
<li><a href="#">Pizza</a></li>
<li><a href="#">Pasta</a></li>
<li><a href="#">Burger</a></li>
<li><a href="#">Specials</a></li>
<li><a href="#">Drinks</a></li>
</ul>
</nav>
It's great if I only have one dropdown menu, but as soon as I add another one, only one of them (it doesn't matter if it's two, three, or more) actually crashes.
I gave each Menu its own ID and copied the code and replaced it each time, but that doesn't work.
Already looked into this ( using the same function from different events ) or this ( JQuery - use the same function for multiple queries ) and other topics, but I can't figure out how to apply this in my code ...
Here's my Jsfiddle on what I'm trying to do: https://jsfiddle.net/thwdyccr/2/
source to share
Use classes instead of ids and then you can do the same code for all cases ( fiddle ):
$(function () {
var pull = $('.pull');
$(pull).on('click', function (e) {
e.preventDefault();
var menu = $(this).next();
menu.slideToggle();
});
});
<nav class="container"> <a href="#" class="pull" style="display:block;">
<h3>Menu1</h3>
</a>
<ul class="nav" style="display:none;">
<li><a href="#">Pizza</a>
</li>
<li><a href="#">Pasta</a>
</li>
<li><a href="#">Burger</a>
</li>
<li><a href="#">Specials</a>
</li>
<li><a href="#">Drinks</a>
</li>
</ul>
</nav>
<nav class="container"> <a href="#" class="pull" style="display:block;">
<h3>Menu2</h3>
</a>
<ul class="nav" style="display:none;">
<li><a href="#">Pizza</a>
</li>
<li><a href="#">Pasta</a>
</li>
<li><a href="#">Burger</a>
</li>
<li><a href="#">Specials</a>
</li>
<li><a href="#">Drinks</a>
</li>
</ul>
</nav>
source to share
Try this: https://jsfiddle.net/thwdyccr/5/
Instead of using IDs - think about using a class instead - this will save you a lot of duplication in your code (since, in essence, it all does the same thing).
You can specify the target selector (like the element you want to show) by traversing your structure with .parent()
.children()
or.find()
If you're wondering why I'm storing $(this)
in var element
- it's because the browser has to figure out what $(this)
every time you use it, so it's a good idea to store it in a variable.
Html
<nav class="container">
<a href="#" class="pull" style="display:block;">
<h3>Menu1</h3>
</a>
<ul class="nav" style="display:none;">
<li><a href="#">Bear</a></li>
<li><a href="#">Pasta</a></li>
<li><a href="#">Burger</a></li>
<li><a href="#">Specials</a></li>
<li><a href="#">Drinks</a></li>
</ul>
</nav>
<nav class="container">
<a href="#" class="pull" style="display:block;">
<h3>Menu2</h3>
</a>
<ul class="nav" style="display:none;">
<li><a href="#">Fish</a></li>
<li><a href="#">Pasta</a></li>
<li><a href="#">Burger</a></li>
<li><a href="#">Specials</a></li>
<li><a href="#">Drinks</a></li>
</ul>
</nav>
Js
$(function() {
$(".pull").click(function(e) {
e.preventDefault();
var element = $(this);
element.parent('nav.container').children("ul.nav").slideToggle();
});
});
source to share
You shouldn't use id for pull
. Here's an updated fiddle https://jsfiddle.net/thwdyccr/2/ .
source to share
Try using the attribute selector begins with [name ^ = "of value"] [id^=pull]
, e.target.parentElement.nextElementSibling
to select the next ul
, to call .slideToggle()
on
$(function() {
var pull = $("[id^=pull]")
, menu = $("[id^=nav]")
, menuHeight = menu.height();
pull.on("click", function(e) {
e.preventDefault();
$(e.target.parentElement.nextElementSibling).slideToggle();
});
});
jsfiddle https://jsfiddle.net/wpvok7gy/1/
source to share