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语句，因此＆gt;箭头继续在0级（导航）工作。如果我使用if语句而不是if，＆gt;箭头在0级和1级都有效，而不是我要找的东西。

如果有人知道我的代码有什么问题，我将非常感谢您的回答。谢谢。

Answer 1

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

您想要做的是：

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

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")

jQuery if / else if语句优先级

3 个答案: