Question

所以我在平板电脑和移动分辨率上有这个下拉菜单，用于更改菜单下方的内容。我有一切正常工作，但是当我点击网络应用程序链接时我无法关闭设置部分。我正在尝试使用活动类来打开/关闭菜单但我必须遗漏一些东西。我可以在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>

Answer 1

您可以像这样使用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');
});

关闭具有活动类的子菜单

1 个答案: