jQuery if/else Statement

Question

У меня есть панель с 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. Если это так, я просто хочу, чтобы он скрывал эти * Идентификаторы контента и отображал #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'); 
} 
}); 
}); 

Таким образом, в тот момент, особенно кнопка не делает ничего ... Я предполагаю, что я не структурирование еще, если заявление они, как я намерен его работать.

Answer 1

Попробуйте

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

Вместо $("#utilityBK").is(":hidden")

Update:

Демо ссылка http://jsfiddle.net/dhana36/YT3CD/1/

Я вообразил вы пытаетесь скрыть DIV, как это,

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

Answer 2

.not() не возвращается true/false нравится .is(). Он возвращает коллекцию jQuery. Если вы хотите проверить наличие каких-либо элементов в коллекции, используйте .length:

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