Lydia Maier
Reputation: 439
How to toggle dropdown navigation menu?
something is wrong with my code, here is what it should do, but doesn't.^^
E.g. on click on "nav 1", slide down and fadein subnavigation, than on click on "nav 2", fade sub navigation 1 out and fade sub navigation 2 in.
This is what I have so fare:
var nav = $('.nav li.mega');
nav.children('.subnav-container').slideUp(0);
nav.click(function (e) {
e.preventDefault();
nav.children('.subnav-container').slideUp(500);
$(this).children('.subnav-container').slideDown(500);
});
My fiddle: http://jsfiddle.net/rzf7w69u/78/
I hope you guys can help me with my code.
Upvotes: 1
Views: 65
Answers (1)
ACT
Reputation: 159
There are multiple problems in the shared code.
- you are binding event in common class (shared by other elements too).
- Logic to manage slide up and slide down. Here is your code, hope this will help you. 'Happy coding..'
Note: I did the code in your format, so this code can be improve more.
$(document).ready(function(){
$(".nav li.mega").hover(function(){
$(this).addClass("hover");
$(this).children(".subnav-container").addClass("hover");
},function(){
$(this).removeClass("hover");
$(this).children(".subnav-container").removeClass("hover");
});
var nav = $('.nav li.mega');
nav.children('.sibling').slideUp(0);
nav.click(function (e) {
e.preventDefault();
var ele=this;
if( $(ele).children('.sibling').hasClass('open')){
$(ele).children('.sibling').removeClass('open').slideUp(500);
}
else
{
if(nav.children('.open').length)
{
var child=nav.children('.open');
$(child).removeClass('open').fadeOut(500,function(){ $(ele).children('.sibling').addClass('open').fadeIn(500); });
}
else
{
$(ele).children('.sibling').addClass('open').slideDown(500);
}
}
});
});<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-top mod_navigation " itemscope="" itemtype="http://schema.org/SiteNavigationElement">
<div class="ws-navbar-collapse pull-left">
<ul class="nav navbar-nav">
<li class="submenu mega ncol-3 sibling nav-item dropdown subnav">
<a class="" href="url" >
<span itemprop="name">Nav 1</span>
</a>
<div class="subnav-container submenu mega ncol_4 sibling nav-item dropdown">
<div class="relative">
<ul class="nav sub-nav level-2">
<li class="submenu first subnav">
<a class=" " href="url" >
<span itemprop="name">Sub nav 1.1</span>
</a>
<div class="subnav-container submenu break_4 last">
<div class="relative">
<ul class="nav sub-nav level-3">
<li class="first">
<a class=" " href="url" >
<span itemprop="name">Sub Sub Nav</span>
<span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a>
</li>
<li class="">
<a class=" " >
<span itemprop="name">Sub Sub Nav</span>
<span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a>
</li>
<li class="">
<a class=" " >
<span itemprop="name">Sub Sub Nav</span>
<span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a>
</li>
<li class="">
<a class=" ">
<span itemprop="name">Sub Sub Nav</span>
<span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a>
</li>
<div class="clear"></div>
</ul>
</div>
</div>
</li>
<li class="submenu first subnav">
<a class=" " href="url" >
<span itemprop="name">Sub nav 1.2</span>
</a>
<div class="subnav-container submenu break_4 last">
<div class="relative">
<ul class="nav sub-nav level-3">
<li class="first">
<a class=" " href="url" >
<span itemprop="name">Sub Sub Nav</span>
<span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a>
</li>
<li class="">
<a class=" " >
<span itemprop="name">Sub Sub Nav</span>
<span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a>
</li>
<li class="">
<a class=" " >
<span itemprop="name">Sub Sub Nav</span>
<span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a>
</li>
<li class="">
<a class=" ">
<span itemprop="name">Sub Sub Nav</span>
<span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a>
</li>
<div class="clear"></div>
</ul>
</div>
</div>
</li>
<li class="submenu first subnav">
<a class=" " href="url" >
<span itemprop="name">Sub nav 1.3</span>
</a>
<div class="subnav-container submenu break_4 last">
<div class="relative">
<ul class="nav sub-nav level-3">
<li class="first">
<a class=" " href="url" >
<span itemprop="name">Sub Sub Nav</span>
<span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a>
</li>
<li class="">
<a class=" " >
<span itemprop="name">Sub Sub Nav</span>
<span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a>
</li>
<li class="">
<a class=" " >
<span itemprop="name">Sub Sub Nav</span>
<span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a>
</li>
<li class="">
<a class=" ">
<span itemprop="name">Sub Sub Nav</span>
<span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a>
</li>
<div class="clear"></div>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="submenu mega ncol-3 sibling nav-item dropdown subnav">
<a class="" href="url" >
<span itemprop="name">Nav 2</span>
</a>
<div class="subnav-container submenu mega ncol_4 sibling nav-item dropdown">
<div class="relative">
<ul class="nav sub-nav level-2">
<li class="submenu first subnav">
<a class=" " href="url" >
<span itemprop="name">Sub nav 2.1</span>
</a>
<div class="subnav-container submenu break_4 last">
<div class="relative">
<ul class="nav sub-nav level-3">
<li class="first">
<a class=" " href="url" >
<span itemprop="name">Sub Sub Nav</span>
<span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a>
</li>
<li class="">
<a class=" " >
<span itemprop="name">Sub Sub Nav</span>
<span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a>
</li>
<li class="">
<a class=" " >
<span itemprop="name">Sub Sub Nav</span>
<span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a>
</li>
<li class="">
<a class=" ">
<span itemprop="name">Sub Sub Nav</span>
<span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a>
</li>
<div class="clear"></div>
</ul>
</div>
</div>
</li>
<li class="submenu first subnav">
<a class=" " href="url" >
<span itemprop="name">Sub nav 2.2</span>
</a>
<div class="subnav-container submenu break_4 last">
<div class="relative">
<ul class="nav sub-nav level-3">
<li class="first">
<a class=" " href="url" >
<span itemprop="name">Sub Sub Nav</span>
<span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a>
</li>
<li class="">
<a class=" " >
<span itemprop="name">Sub Sub Nav</span>
<span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a>
</li>
<li class="">
<a class=" " >
<span itemprop="name">Sub Sub Nav</span>
<span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a>
</li>
<li class="">
<a class=" ">
<span itemprop="name">Sub Sub Nav</span>
<span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a>
</li>
<div class="clear"></div>
</ul>
</div>
</div>
</li>
<li class="submenu first subnav">
<a class=" " href="url" >
<span itemprop="name">Sub nav 2.3</span>
</a>
<div class="subnav-container submenu break_4 last">
<div class="relative">
<ul class="nav sub-nav level-3">
<li class="first">
<a class=" " href="url" >
<span itemprop="name">Sub Sub Nav</span>
<span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a>
</li>
<li class="">
<a class=" " >
<span itemprop="name">Sub Sub Nav</span>
<span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a>
</li>
<li class="">
<a class=" " >
<span itemprop="name">Sub Sub Nav</span>
<span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a>
</li>
<li class="">
<a class=" ">
<span itemprop="name">Sub Sub Nav</span>
<span class="page-title">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</span> </a>
</li>
<div class="clear"></div>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
<li class="submenu mega ncol-3 sibling nav-item dropdown subnav">
<a class="" href="url" >
<span itemprop="name">Nav 3</span>
</a>
<div class="subnav-container submenu mega ncol_4 sibling nav-item dropdown">
<div class="relative">
<ul class="nav sub-nav level-2">
<li class="submenu first subnav">
<a class=" " href="url" >
<span itemprop="name">Sub nav 3.1</span>
</a>
</li>
<li class="submenu first subnav">
<a class=" " href="url" >
<span itemprop="name">Sub nav 3.2</span>
</a>
</li>
<li class="submenu first subnav">
<a class=" " href="url" >
<span itemprop="name">Sub nav 3.3</span>
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
</header>
</body>
</html>Upvotes: 2
Related Questions
- Vanilla Javascript Toggle Drop Down Menu
- Javascript dropdown menu toggle button
- Toggle menu by clicking anywhere on the screen
- Drop down menu with on click toggle
- Drop down menu toggle
- Jquery Toggle Drop Down Menu
- Javascript Dropdown Menu Toggle Onclick
- jQuery toggle menu dropdown
- div vision toggle from drop down menu
- HTML "Dropdown Menu" - toggle on click