Question

我只需要用这个推动一下，我几乎就在那里。

有一个导航栏，其项目在点击它们时会显示下拉列表，当您在项目中点击下拉列表正确折叠时，但当您单击同一项目以折叠其下拉列表时，下拉列表会向下滑动然后向下滑动试。

我创建了 demo in 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();
});

提前感谢您提供任何帮助。

Answer 1

删除它：$（this）.toggleClass（'active'）;

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

Answer 2

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

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

现在 CodePen Demo is working 。

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

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

希望将来可以帮助其他人。

感谢。

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

2 个答案: