单击项目时，下拉菜单再次隐藏然后滑动

debugcn 发表于 Dev

里卡多·泽（Ricardo Zea）

我只需要轻轻一按，我就快到了。

有一个导航栏，单击它的项目会显示下拉菜单，当您从一个项目单击另一个项目时，下拉菜单会正确折叠，但是当您单击同一项目以折叠其下拉菜单时，下拉菜单会向上滑动然后再次向下滑动。

我在CodePen中创建了此演示- （此演示自从我使用工作脚本对其进行了更新以来，现在可以正常工作。请参见下面的答案）。

这是我正在使用的基本HTML结构：

<ul class="dd-container fll">
  <li><a href="#">Link 1</a>
    <ul class="dropdown second-level-nav">
      <li><a href="#">SubLink 1</a></li>
      <li><a href="#">SubLink 2</a></li>
      <li><a href="#">SubLink 3</a></li>
    </ul>
  </li>
  <li><a href="#">Link 2</a>
    <ul class="dropdown second-level-nav">
      <li><a href="#">SubLink 1</a></li>
      <li><a href="#">SubLink 2</a></li>
      <li><a href="#">SubLink 3</a></li>
    </ul>
  </li>
  <li><a href="#">Link 3</a>
    <ul class="dropdown second-level-nav">
      <li><a href="#">SubLink 1</a></li>
      <li><a href="#">SubLink 2</a></li>
      <li><a href="#">SubLink 3</a></li>
    </ul>
  </li>
</ul>

<ul class="dd-container flr">
  <li><a href="#">Login</a></li>
  <li><a href="#">Cart</a>
    <ul class="dropdown second-level-nav">
      <li><a href="#">SubLink 1</a></li>
      <li><a href="#">SubLink 2</a></li>
      <li><a href="#">SubLink 3</a></li>
    </ul>
  </li>
</ul>

这是我正在使用的脚本：

//Nav bar dropdowns
$('.dd-container li').click(function(){     
    //Remove class .active from any other <li> and hide any other dropdown that's visible
    $(this).parents().find('.active').removeClass('active').find('.dropdown').slideUp();
    //Toggle class .active
    $(this).toggleClass('active');
    //Slide up/down the actual dropdown     
    $(this).find('.dropdown').stop(true, true).slideToggle();
});

在此先感谢您的任何帮助。

里卡多·泽（Ricardo Zea）

好吧，这比我预期的要多一些工作，但是我终于解决了。

下面的happybuddha和Jeevan的建议不是一个选择，因为我需要能够切换项目的类，以便用户可以清楚地看到该项目处于活动/选中状态。基本上是出于可用性的原因。

该CodePen演示工作现在。

工作脚本就是这个脚本（不确定这是否是编写此脚本的最佳方法，但是效果很好）：

//Nav bar dropdowns
var dropdown = '.dropdown';
$('.dd-container > li').click(function(){
  //Hide any other dropdown that's visible
  $(this).siblings().find(dropdown).slideUp();
  //Hide Cart dropdown
  $(this).parents('.dd-container').siblings().find(dropdown).slideUp();     
  //Toggle class .active
  $(this).toggleClass('active');
  //Remove class .active from any other <li>
  $(this).parents().find('.active').not(this).removeClass('active');
  //Slide up/down the actual dropdown       
  $(this).find(dropdown).stop(true, true).slideToggle();        
});

为了进行视觉比较，这是旧的无效脚本：

//Nav bar dropdowns
$('.dd-container li').click(function(){     
    //Remove class .active from any other <li> and hide any other dropdown that's visible
    $(this).parents().find('.active').removeClass('active').find('.dropdown').slideUp();
    //Toggle class .active
    $(this).toggleClass('active');
    //Slide up/down the actual dropdown     
    $(this).find('.dropdown').stop(true, true).slideToggle();
});

希望这对以后的人有所帮助。

谢谢。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。