Question

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

当我点击“下拉列表1”时Test 1＆amp; 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/

Answer 1

你不应该在CSS中强迫可见性。这样的事情应该做：

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

<强> Demo

CSS调整显示子子菜单：

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

Answer 2

评论slideUp命令阻止了口吃。所以，我想我会检查那里的选择器是什么：

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

告诉我它实际上是在选择三种不同的元素。要确保只选择了正确的答案，您只需将.navtoggle +添加到.submenu选择器：

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

Answer 3

试试这个

的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;}

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

3 个答案:

试试这个

的jQuery

CSS