jQuery:元素静止":隐藏的“;在.slideDown(）之后

jQuery: Element still ":hidden" after .slideDown()

本文关键字：slideDown 之后 隐藏 静止 元素 quot jQuery      更新时间：2023-09-26

我有一个元素要使用CSS display: none;开始隐藏，slideDown()在按钮的click()上可见，最后slideUp()回到隐藏在同一按钮的click()上。

看起来它应该很容易实现，但它不起作用，我发现这是因为即使在slideDown()之后，element:hidden属性似乎仍然是true。

这是CSS：

#event-form {
    height: 200px;
    border: 1px dashed black;
    margin-bottom: 10px;
    display: none;
}

这是脚本：

$('#create-new').click(function() {
    if ($('#event-form:hidden')) {
        $('#event-form').slideDown();
    }
    else {
        $('#event-form').slideUp();
    }
});

有什么建议吗？谢谢

无论是否选择任何内容，条件if ($('#event-form:hidden')) { }都将返回true。要检查元素是否隐藏，可以使用.is()方法（返回布尔值）：

此处示例

$('#event-form').is(':hidden')

或者检查jQuery对象的长度：

$('#event-form:hidden').length

您也可以使用.slideToggle()方法：

$('#create-new').click(function() {
    $('#event-form').slideToggle();
});

从CSS中删除display: none并使用JavaScript:隐藏它

$("#event-form").hide();

将:hidden改为：

if ($('#event-form').is(':hidden')) {
相关文章：