Question

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

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

这是目前仅用于切换utilityBK的功能之一，就是这样。

$(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。如果是这样，我只是希望它隐藏那些*内容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 if语句，我打算让它工作。

Answer 1

.not()不会像true/false一样返回.is()。它返回一个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');
        });
});

jQuery if / else语句

2 个答案: