Как проверить, виден ли элемент с помощью jQuery?
я использую
$('#analytics').toggle("slide");
для переключения видимости элемента. Но когда я пытаюсь проверить, видно ли, используя
$('#analytics').is(":visible")
Он всегда отображается как видимый после того, как был переключен видимым один раз ...
Как лучше всего проверить видимость элемента, если он контролируется с помощью функции переключения jQuery?
в зависимости от того, как вы определяете свои компоненты, я бы сохранил его как логическое значение в вашем объекте, а затем применил и ссылался соответственно ... Поскольку некоторые вложенные структуры могут стать довольно сложными. Причина, по которой я сказал, заключается в том, что, возможно, #analytics виден, но некоторые дочерние элементы div могут не отображаться.
Лучше всего было бы придумать скрипт live snippet / js, который имеет именно эту проблему, чтобы каждый мог увидеть и протестировать его.
Замечание Re @ Isac: вы можете выполнить минимальный воспроизводимый пример, демонстрирующий проблему, в идеале - работоспособный, используя Stack Snippets (кнопка панели инструментов [<>]; вот как это сделать).
То, что вы показали в вопросе, явно получает false после завершения slide: jsfiddle.net/bwz2dkh5 Итак, нам действительно нужен этот MCVE.
не могли бы вы проверить мои изменения и отзывы?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я думаю, что display - это то, что вы ищете:
РЕДАКТИРОВАТЬ
Я только что попробовал ваш собственный $('#analytics').is(":visible") и подумал, что может быть проблема с вашим время (думаю, асинхронный); попробуйте этот код, который ждет, пока анимация не закончится, прежде чем запрашивать видимость, по крайней мере, в фрагменте работает, я был бы очень признателен за ваш отзыв.
$('button').click(function(){
$('#analytics').toggle("slide", function(){
console.info($('#analytics').is(":visible") ? 'visible':'hidden');
});
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "analytics">analytics</div>
<button>button</button>Дисплей - это не то же самое, что и видимость, это не сработает
@SterlingArcher, ты ведь нажал Запустить фрагмент кода, да?
Что делать, если кнопка не отображается на экране (пользователь прокручивает вниз), в то время как CSS все еще настроен на отображение?
@Scaramouche: Есть несколько аспектов того, чтобы быть видимым, см. документация jQuery для функции :visible, которую использует OP.
@ChinLeung, я не думаю, что не отображается, потому что окно было прокручено - это то, к чему стремился ОП, когда пробовал $('#analytics').is(":visible")
@ T.J.Crowder, OP использует $('#analytics').toggle("slide"); для переключения видимости элемента, и что делает .toggle("slide"), помимо его первой анимации, устанавливает display на none, верно? что является ключом к моему ответу. конечно, вы не можете сузить видимость до состояния display, но в этом случае, как OP переключает его, это вполне жизнеспособно IMO
@Scaramouche: конечно, но :visible это проверяет. Поэтому, если :visible не работает (согласно OP), выполнение собственной проверки только на display тоже не сработает.
@ T.J. Crowder, пожалуйста, проверьте мои изменения и скажите, что вы думаете
@Scaramouche: это полностью возможный (и почему я опубликовал рабочий пример для OP и попросил OP показать нам реальную проблему), но это предположение до тех пор, пока / если они этого не сделают, - поэтому я публикую комментарий, а не ответ.
Ответ @Scaramouche был правильным и правильным. Ключевым моментом была проверка видимости внутри функции переключения из-за выполнения асинхронного кода. Спасибо!
Возможный дубликат Как проверить, скрыт ли элемент в jQuery?