Question

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

似乎它应该简单易用，但它不起作用，我发现它是因为element:hidden属性似乎仍然存在true slideDown()。

这里是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();
    }
});

有什么建议吗？感谢。

Answer 1

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

Example Here

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

或检查jQuery对象的长度：

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

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

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

Answer 2

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

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

而不是:hidden将其更改为：

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

jQuery：元素仍然是＆＃34;：隐藏＆＃34;在.slideDown（）之后

2 个答案: