jQuery if/else 语句

Question

我有一个带有 3 个按钮的面板。目前我有它，如果您单击 3 个按钮之一，它会切换隐藏的 DIV（“#utilityBK”）显示，然后从底部设置动画并向上滑动。我需要在函数中添加一些逻辑来确定“#utilityBK”是否已经显示，如果是，只需换出其中包含的不同 DIV。这是HTML

<div id="utilityBK">
<div id="chatContent"></div>
<div id="locationsContent"></div>
<div id="searchContent"></div>
</div>

这是目前仅用于切换实用程序 BK 的功能之一，就是这样。

$(document).ready(function(){
    ("#chat").click(function(){
       if ($("#utilityBK").is(":hidden")) {
          $("#utilityBK").animate({'bottom': '60px'}, 'slow');
          $('body').addClass('noscroll');
       } 
    else {
       $("#utilityBK").animate({'bottom': '-325px'}, 'slow');
       $('body').removeClass('noscroll');
         } 
    }); 
});

然后这是我尝试添加额外的逻辑来检查是否显示#utilityBK、#searchContent 或#chatContent。如果是这样，我只希望它隐藏那些 *Content ID 并显示 #locationsContent DIV，否则为 #utilityBK 设置动画。

$(document).ready(function(){
$("#locations").click(function(){
  if ($("#utilityBK").is(":hidden")) {
   $("#utilityBK").animate({'bottom': '60px'}, 'slow');
   $('body').addClass('noscroll');
} 
else  if ($("#searchContent, #chatContent, #utilityNav").not(":hidden")) {
    $("#searchContent").css("display","none");
    $("#chatContent").css("display","none");
    $("#locationsContent").css("display","block");  
} else {
    $("#utilityBK").animate({'bottom': '-325px'}, 'slow');
    $('body').removeClass('noscroll');
} 
}); 
});

所以目前那个特定的按钮没有做任何事情......我猜我并没有按照我想要的方式构建 else if 语句。

Answer 1

.not() 不会像 .is() 那样返回 true/false。它返回一个 jQuery 集合。如果要测试集合中是否有元素，使用.length：

if ($("#searchContent, #chatContent, #utilityNav").not(":hidden").length > 0)

Answer 2

试试这个

// Matches #utilityBK element that are hidden
$('#utilityBK:hidden').length > 0

而不是$("#utilityBK").is(":hidden")

更新：

演示链接http://jsfiddle.net/dhana36/YT3CD/1/

我以为你想像这样隐藏 div，

$(document).ready(function(){
    $("#chat").on('click', function(){
       $("#utilityBK").toggle('slow');
        });
});