停止下拉菜单上的闪烁效果

Stop flicker effect on dropdown menu

本文关键字：闪烁 下拉菜单      更新时间：2023-09-26

如何停止菜单上的"闪烁"效果？

当我单击"下拉列表1"时，Test 1和Test 2闪烁。我相信这是因为我使用 !important 子句强制这样做。

帮助？

  $(document).ready(function($) {
    $('.inline').find('.navtoggle').click(function(){
      //Expand or collapse this panel
      $(this).next().slideToggle('fast');
      //Hide the other panels
      $(".sub-menu").not($(this).next()).slideUp('fast');
    });
  });

http://jsfiddle.net/4dm318nn/1/

你不应该在你的CSS中如此努力地强迫可见性。像这样的事情应该做：

$(this).next('ul').slideToggle();
$(this).closest('li').siblings().children('ul').slideUp();

演示

CSS 调整显示子菜单：

.primary-item > .sub-menu {
    display: none;
}
注释

掉slideUp命令停止了卡顿。所以，我想我会检查一下那里的选择器捕获了什么：

console.log($(".sub-menu").not($(this).next()));

向我展示了它实际上是选择三个不同的元素。为了确保它只选择了正确的答案，您只需将.navtoggle +添加到.submenu选择器中：

$(".navtoggle + .sub-menu").not($(this).next()).slideUp('fast')

试试这个

jQuery

 $(document).ready(function($) {
    $('.inline').find('.navtoggle').click(function(){        
        //Expand or collapse this panel
        $(this).next().slideToggle('fast', function(){
          $(this).find(".sub-menu").slideDown('fast');
        });
       //Hide the other panels
       $(this).parent().siblings().find(".sub-menu").slideUp('fast');    
   });
});

.CSS

.accordion-toggle {cursor: pointer;}
.sub-menu {display: none;}
相关文章：