demo

Question

我正在使用一个简单的切换功能来隐藏显示div，但是会出现2个问题。

如何在页面加载时隐藏div，并在按钮事件上使用jQuery显示（取消隐藏）该div。
我在一个单独的例子中使用切换功能逻辑它正在工作，但在此代码中不起作用。

代码：

$(document).ready(function()
{
    $('#add_button').click(function (){hide_show_add_div();});
});

function hide_show_add_div()
{
                $('#add_new_div').toggle(900);
}

add_button是按钮ID，add_new_div是div的id，它将切换。如果我错了，请纠正我。

Answer 1

最初隐藏应该使用样式显示：none应用于div

Answer 2

$(document).ready(function()
{   
    $('#add_new_div').hide();
    $('#add_button').click(function (){hide_show_add_div();}); 
});

function hide_show_add_div()
{
    $('#add_new_div').toggle(900);
}

demo

Answer 3

您可以在页面加载时使用jQuery代码隐藏div：

$(document).ready(function()
{
    $('#add_new_div').hide();
    $('#add_button').click(function (){hide_show_add_div();});
});

function hide_show_add_div()
{
    $('#add_new_div').toggle(900);
}

您也可以使用CSS来隐藏它（style="display: none"）。这样做的好处是，即使禁用了javascript，div也会被隐藏。用javascript代码隐藏它可能会导致div出现一段时间然后再次隐藏。如果javascript因某种原因运行缓慢，就会发生这种情况。

jQuery切换不在特定条件下工作

3 个答案:

demo