jQuery if / else if语句优先级

Question

我试图理解为什么我的代码无法按我想要的方式工作。 在评论中，我解释了每个部分的含义。

这是我的代码：

$(document).keyup(function(event){
    // if hit > arrow key
    if(event.keyCode == 39){

      // if nav's level 1 dropdown list is not displayed, use > arrow in level 0
      if ($('nav li .sub-menu').css('display', 'none')){
        $('nav li.active').next().addClass('active').siblings().removeClass('active');


      // else if level 1 dropdown list is displayed, use > arrow in level 1
      }else if ($('nav li.active .sub-menu').css('display', 'block') && $('nav .sub-menu li').hasClass('has-child')){ 


         // open level 2 dropdown list
         $('nav li.active .sub-menu li.has-child').find('.sub-sub-menu').stop().hide(); 
      }
    }        
});

问题是，无论是否显示下拉列表，它都不会进入else if语句，因此>箭头始终在0级（nav）中起作用。 如果我使用if语句代替else if，>箭头可同时在0级和1级中使用，而这并不是我想要的。

如果有人知道我的代码有什么问题，不胜感激。 谢谢。

Answer 1

$('nav li .sub-menu').css('display', 'none')将显示设置为none ，不检查其值。 这就是为什么它不起作用。

您想要做的是：

if($('nav li .sub-menu').css('display') === 'none)

else语句也是else 。 您应该改为以下内容：

$(document).keyup(function(event){
    // if hit > arrow key
    if(event.keyCode == 39){
      var nav = $('nav li .sub-menu');
      var navDisplay = nav.css('display');

      // if nav's level 1 dropdown list is not displayed, use > arrow in level 0
      if (navDisplay === 'none'){
        $('nav li.active').next().addClass('active').siblings().removeClass('active');


      // else if level 1 dropdown list is displayed, use > arrow in level 1
      }else if (navDisplay === 'block' && nav.hasClass('has-child')){ 


         // open level 2 dropdown list
         $('nav li.active .sub-menu li.has-child').find('.sub-sub-menu').stop().hide(); 
      }
    }        
});

如果您知道要重用它们，请尝试养成存储jQuery调用结果的习惯，这些DOM调用可能会变得非常昂贵。

Answer 2

您在这里有几种选择。

你可以做：

if($('nav li .sub-menu').css('display') === 'none'))

要么

if($('nav li .sub-menu:visible'))

要么

if($('nav li .sub-menu').is(":visible")))

最后一个是最漂亮，最漂亮的标准。

Answer 3

您正在设置显示而不检查状态。 试试这个检查您的元素是否被隐藏

$('nav li.active .sub-menu').is(":visible")