Как запустить функцию, только если div отображается в jQuery?

Question

Я использую следующую функцию щелчка, чтобы закрыть форму контакта и переключить класс по ссылкам на панели навигации:

<script type="text/javascript">
$(document).ready(function(){
    $("#home").click(function(){
        $("#panel").slideUp("slow");
        $(this).toggleClass("current");
        $("#contact").toggleClass("current");
        return false;
    });
});
</script>

Вы можете увидеть скрипт в действии на этой странице . Проблема в том, что я хочу переключать класс в контактной ссылке только в том случае, если контактная форма открыта (то есть div отображается вверху страницы). Как бы я добавил предложение if в скрипт вдоль строк "если открыт #panel, запустить toggleClass на #contact?

Спасибо

Ник

Answer 1

if($('#panel').is(':visible'))
  $(this).toggleClass("current");

Answer 2

Вместо переключения класса вы можете установить и удалить класс. По логике, когда вы нажимаете ссылку a#home, ссылка должна получить класс current, а элемент #contact не должен иметь класс current.

$(this).addClass("current");
$("#contact").removeClass("current");

Если вы не хотите выполнять функцию, когда форма невидима, используйте:

$("#home").click(function(){
   if(!$('#panel').is(':visible')) return;
   //Rest of code

Answer 3

Попробуйте -

if ($("#panel").is(":visible")) {
  //your code
}

Answer 4

Начиная с версии 1.3, .toggleClass() принимает параметр switch для определения необходимости добавления или удаления класса.

Например, используя следующий код:

 $("#contact").toggleClass("current", $('#panel').is(':visible'));

Класс добавляется к #contact, если #panel видим, и удаляется в противном случае.

Answer 5

Вы можете сделать видимую проверку, например, if($("#contact:visible").length > -1), однако я видел примеры, где if($("#contact")) было достаточно.

Answer 6

Существует множество способов проверить видимость элемента с помощью jQuery, но я не уверен, на какие механизмы полагаться каждый, и, учитывая, что знаю ваша панель указывает display:none, это должно помочь:

if ($("#panel").css("display") != "none") {

}