javascript - 如何切换下拉导航菜单？
问题描述
我的代码有问题，这是它应该做的，但没有。^^
例如点击“nav 1”，向下滑动并淡入子导航，而不是点击“nav 2”，淡出子导航1和淡入子导航2。
这就是我的票价：
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);
});
我的小提琴：http: //jsfiddle.net/rzf7w69u/78/
我希望你们能帮助我的代码。
解决方案
共享代码中存在多个问题。
- 您在公共类中绑定事件（也由其他元素共享）。
- 管理上滑和下滑的逻辑。这是您的代码，希望对您有所帮助。'快乐编码..'
注意：我按照您的格式编写了代码，因此此代码可以进一步改进。
$(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>推荐阅读
- azure-aks - 在 Azure 中获取 kubectl 凭据
- angular - Angular FxFlex 布局
- assembly - 我无法真正理解问题的重点，因为我不在汇编程序上编程
- android - 更改为 targetSdkVersion 28 时，Flutter 中 FCM 的 Android 自定义通知声音不起作用
- python - 从另一个字典中的键值中选择键值对
- python - 找到达到 n 所需的最小步数
- api - Search_tabs.json - Yammer API
- android - 添加的 EditText 不是 TextInputEditText。请改用该类。如何解决？
- c# - C# WPF - 输入验证 - 不能在文本框中使用小数点（句点）
- javascript - {JS} 返回 Promise { < Pending > }