我的代码出了点问题，这是应该做的，但是没有。^^
例如单击“导航1”，向下滑动并渐入子导航，然后单击“导航2”，渐出子导航1并渐入子导航2。
这就是我的票价：
function loadFile () {
var filepicker = $('#filepicker')[0];
if (!filepicker.files.length) return;
var reader = new window.FileReader();
var file = filepicker.files[0];
reader.onload = function (e) {
var txt = e.target.result;
processSVG(txt);
};
reader.readAsText(file)
}
$('#load-file').on('click', loadFile);
$('#filepicker').on('change', loadFile);
我的小提琴： http://jsfiddle.net/rzf7w69u/78/
我希望你们能帮助我编写代码。
答案 0 :(得分：2)
共享代码中存在多个问题。
注意：我按照您的格式进行了编码，因此可以对这些代码进行进一步的改进。
$(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>