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

#jquery #if-statement #toggle

#jquery #if-statement #переключить

Вопрос:

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

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

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

Спасибо,

Ник

Ответ №1:

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

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

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

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

Ответ №2:

Попробуйте —

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

Ответ №3:

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

Ответ №4:

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

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

}
  

Ответ №5:

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

Ответ №6:

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

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

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

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