0

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

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

我在 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();
});

提前感谢您对此的任何帮助。

4

2 回答 2

0

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

下面的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();
});

希望这对将来的其他人有所帮助。

谢谢。

于 2013-08-14T18:03:17.367 回答
0

删除这个： $(this).toggleClass('active');

笔：http ://codepen.io/anon/full/BKhnD

于 2013-08-14T15:19:43.597 回答