關閉活動班級的子菜單

因此，我在平板電腦和移動解決方案上使用此下拉菜單來更改菜單下方的內容。我有一切工作，除非我點擊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

關閉活動班級的子菜單

回答

相關問題