关闭活动班级的子菜单

因此，我在平板电脑和移动解决方案上使用此下拉菜单来更改菜单下方的内容。我有一切工作，除非我点击Web应用程序链接时无法关闭设置部分。我正尝试使用活动类来打开/关闭菜单，但我必须缺少一些东西。我的项目能够codepen here 关闭活动班级的子菜单

或者在这里被看作是片段

(function($) { 
 
    
 
    $(document).foundation(); 
 

 
$('.js-toggle-menu').click(function(e){ 
 
    e.preventDefault(); 
 
    $('.mobile-header-nav').slideToggle(); 
 
    $(this).toggleClass('open'); 
 
}); 
 
$('.js-toggle-sub, .subnav li a').click(function(e){ 
 
    $('.mobile-header-subnav').slideToggle(); 
 
    $(this).toggleClass('open'); 
 
}); 
 

 
$('.sub-toggle').click(function(e){ 
 
    $('li a').removeClass("active"); 
 
    $(this).addClass("active"); 
 
    $(this).next('.subnav').slideToggle(); 
 
    $(this).toggleClass('open'); 
 
}); 
 

 
function handleMenuClick(e){ 
 
    e.stopPropagation(); 
 
    $('.newContent').html($($(this).attr("href")).html()); 
 
} 
 
$("ul.mobile-header-subnav").on("click", ".subnav li a",handleMenuClick); 
 

 

 
function tabMenuClick(e){ 
 
    e.stopPropagation(); 
 
    $('.newContent').html($($(this).attr("href")).html()); 
 
} 
 
$(".vertical-links").on("click", ".vertical-tab-links li a",tabMenuClick); 
 

 
$('.vertical-links li a').click(function(){ 
 
    $('li a').removeClass("active"); 
 
    $(this).addClass("active"); 
 
}); 
 

 
$('.subnav li a').click(function(){ 
 
    $('li a').removeClass("active"); 
 
    $(this).addClass("active"); 
 
}); 
 
var mobileTabsInitialState = true; 
 
$(window).resize(function() { 
 
    if(mobileTabsInitialState && !Foundation.utils.is_large_up()) { 
 
    $('.mobile-header-subnav a').eq(0).click(); 
 
    mobileTabsInitialState = false; 
 
    } 
 
}); 
 
}(jQuery));

<body class="theme-carrot"> 
 
    
 

 
    
 
    
 
     <div class="row full-width"> 
 
      
 
    <div class="large-12 show-for-large-up columns nav-bar"> 
 
    <nav class="main-nav"> 
 
    <ul class="left">  
 
    
 
     <li><h1>Cloud</h1></li> 
 
    </ul>  
 
    <ul class="right"> 
 
     <li><a href="#">Products</a></li> 
 
     <li><a href="#">Learn</a></li> 
 
     <li><a href="#">Services</a></li> 
 
     <li><a href="#">Support</a></li> 
 
     <li class="cta"><a href="#" class="button">TRY NOW</a></li> 
 
    </ul> 
 
    </nav>  
 
    </div> 
 
     
 
      <div class="small-12 hide-for-large-up columns small-nav"> 
 
      
 
      <h3>Cloud</h3> 
 
      <nav class="mobile-nav-wrap" role="navigation"> 
 
    <ul class="mobile-header-nav"> 
 
     <li><a href="#">Products</a></li> 
 
     <li><a href="#">Learn</a></li> 
 
     <li><a href="#">Services</a></li> 
 
     <li><a href="#">Support</a></li> 
 
     <li class="divide"><a href="#">Login</a></li> 
 
     <li><img class="search" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-184/search.svg"><a href="#">Search</a></li>  
 
     <li><a href="#" class="button">TRY NOW</a></li> 
 
    </ul> 
 
    </nav> 
 

 
    <a class="mobile-menu-toggle js-toggle-menu hamburger-menu" href="#"> 
 
    <span class="menu-item"></span> 
 
    <span class="menu-item"></span> 
 
    <span class="menu-item"></span> 
 
    </a> 
 
      </div> 
 
      
 
     </div> 
 
     <div class="row"> 
 
    <div class="small-12 columns start"> 
 
    <h2>Get started</h2> 
 
    <p>Lorem ipsum dolor sit amet, ipsum a egestas vel. Nonummy semper sed id tempus. Netus curabitur et diam bibendum urna, vivamus in et sit vulputate libero, erat nostra a. Ipsum nec et lacus non, facilisis morbi gravida viverra iaculis in, elit curabitur amet quisque placerat sed diam, facilisi nulla non at montes, feugiat est. Commodo suspendisse mollis vivamus at, rutrum varius. </p>  
 
    </div> 
 
     </div> 
 
     
 
     <div class="row"> 
 
      <div class="row tabsContainer"> 
 

 
<div class="large-4 columns show-for-large-up"> 
 
<nav class="vertical-links" role="navigation"> 
 
<ul class="vertical-tab-links"> 
 
<li class="category"><h6>Setup</h6></li> 
 
<li><a class="active" href="#panel11">How to setup my account</a></li> 
 
<li><a href="#panel21">How to setup first database</a></li> 
 
<li class="category"><h6>Web Apps</h6></li> 
 
<li><a href="#panel31">How to create a web app</a></li> 
 
<li><a href="#panel41">How to integrate an app</a></li>  
 
</ul>  
 
</nav>    
 
</div>    
 
       
 
<div class="small-12 columns hide-for-large-up secondnav"> 
 
    
 
    <a class="mobile-submenu-toggle js-toggle-sub button" href="#"> 
 
    Get Started 
 
    </a> 
 
    
 
    <nav class="mobile-subnav-wrap" role="navigation"> 
 
    <ul class="mobile-header-subnav"> 
 
     <li> 
 
     <a href="#" class="sub-toggle active">Setup</a> 
 
     <ul class="subnav"> 
 
      <li><a class="active" href="#panel11">How to setup my account</a></li> 
 
      <li><a href="#panel21">How to setup first database</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a class="sub-toggle" href="#">Web apps</a> 
 
     <ul class="subnav"> 
 
      <li><a href="#panel31">How to create a web app</a></li> 
 
      <li><a href="#panel41">How to integrate an app</a></li> 
 
     
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </nav>    
 
</div> 
 

 
<div class="small-12 large-8 columns">  
 
<div class="mainContent"> 
 
    <div class="content active" id="panel11"> 
 
     
 
     <h3>How to setup my account</h3> 
 
     <div class="flex-video"><iframe width="560" height="315" src="https://www.youtube.com/embed/t8lXe-Stsw0?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></div> 
 
     <p>Ut ac tristique ante. Curabitur rutrum diam sed erat efficitur tincidunt. Phasellus aliquet ac quam et sagittis. Maecenas aliquam ac enim ut pharetra. Maecenas pellentesque scelerisque ex, id placerat libero scelerisque a. Vivamus dictum purus non ante faucibus facilisis. In ac est egestas, eleifend turpis egestas, malesuada ante. Nunc at risus mauris. In dui eros, fringilla ut mauris a, fermentum commodo elit. In non nibh neque</p> 
 
     </div> 
 

 
    <div class="content" id="panel21"> 
 
     <h3>How to setup first database</h3> 
 
     <div class="flex-video"><iframe width="560" height="315" src="https://www.youtube.com/embed/t8lXe-Stsw0?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></div> 
 
     <p>Ut ac tristique ante. Curabitur rutrum diam sed erat efficitur tincidunt. Phasellus aliquet ac quam et sagittis. Maecenas aliquam ac enim ut pharetra. Maecenas pellentesque scelerisque ex, id placerat libero scelerisque a. Vivamus dictum purus non ante faucibus facilisis. In ac est egestas, eleifend turpis egestas, malesuada ante. Nunc at risus mauris. In dui eros, fringilla ut mauris a, fermentum commodo elit. In non nibh neque</p> 
 
     
 
    </div> 
 
    <div class="content" id="panel31"> 
 
     <h3>How to create a web app</h3> 
 
     <div class="flex-video"><iframe width="560" height="315" src="https://www.youtube.com/embed/t8lXe-Stsw0?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></div> 
 
     <p>Ut ac tristique ante. Curabitur rutrum diam sed erat efficitur tincidunt. Phasellus aliquet ac quam et sagittis. Maecenas aliquam ac enim ut pharetra. Maecenas pellentesque scelerisque ex, id placerat libero scelerisque a. Vivamus dictum purus non ante faucibus facilisis. In ac est egestas, eleifend turpis egestas, malesuada ante. Nunc at risus mauris. In dui eros, fringilla ut mauris a, fermentum commodo elit. In non nibh neque</p> 
 
    </div> 
 
    <div class="content" id="panel41"> 
 
    <h3>How to integrate an app</h3> 
 
     <div class="flex-video"><iframe width="560" height="315" src="https://www.youtube.com/embed/t8lXe-Stsw0?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></div> 
 
     <p>Ut ac tristique ante. Curabitur rutrum diam sed erat efficitur tincidunt. Phasellus aliquet ac quam et sagittis. Maecenas aliquam ac enim ut pharetra. Maecenas pellentesque scelerisque ex, id placerat libero scelerisque a. Vivamus dictum purus non ante faucibus facilisis. In ac est egestas, eleifend turpis egestas, malesuada ante. Nunc at risus mauris. In dui eros, fringilla ut mauris a, fermentum commodo elit. In non nibh neque</p> 
 
    </div> 
 
    <div class="clearfix"></div> 
 
</div> 
 
    <div class="newContent"> 
 
    <h3>How to setup my account</h3> 
 
     <div class="flex-video"><iframe width="560" height="315" src="https://www.youtube.com/embed/t8lXe-Stsw0?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe></div> 
 
     <p>Ut ac tristique ante. Curabitur rutrum diam sed erat efficitur tincidunt. Phasellus aliquet ac quam et sagittis. Maecenas aliquam ac enim ut pharetra. Maecenas pellentesque scelerisque ex, id placerat libero scelerisque a. Vivamus dictum purus non ante faucibus facilisis. In ac est egestas, eleifend turpis egestas, malesuada ante. Nunc at risus mauris. In dui eros, fringilla ut mauris a, fermentum commodo elit. In non nibh neque</p> 
 
</div> 
 
     </div> 
 
     </div> 
 
     </div> 
 
      
 
      
 
     
 
    </body>

来源

2015-10-20 Megan McGowan

你可以使用jQuery的slideUp()这样的：

$('.sub-toggle').click(function(e) { 
    e.preventDefault(); 
    $('li a').removeClass("active"); 
    $(this).addClass("active"); 
    $('.subnav').slideUp(); // <- Slide up all .subnav before opening new one. 
    $(this).next('.subnav').slideToggle(); 
    $(this).toggleClass('open'); 
});

来源

2015-10-20 16:07:34 1cgonza

关闭活动班级的子菜单

回答

相关问题