【问题标题】：jQuery toggle not working in specific conditionsjQuery切换在特定条件下不起作用
【发布时间】：2013-12-11 06:11:55
【问题描述】：

我正在使用一个简单的切换功能来隐藏-显示一个 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，它将切换。如果我错了，请纠正我。

【问题讨论】：

标签： jquery toggle

【解决方案1】：

$(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

【讨论】：

嘿，谢谢你的演示......但是是否有必要给出高度，因为我的 div 高度和宽度都以 % 为单位。因为我不能使用像素，它会有什么不同吗？我得到了javascript 警告中的错误。 '$' 未定义
不，高度和宽度不是必需的。这只是一个例子，因为我的 div 里面什么都没有。 here's another demo
'$' is not defined 表示 jQuery 没有正确加载或者你正在使用另一个库并且它与 jQuery 冲突。
嘿，它现在正在工作......我犯了一个非常愚蠢的错误..wen，包括我的 js-1.4.4.js......我写了

【解决方案2】：

最初隐藏应该与样式显示一起使用：没有应用于 div

【讨论】：

【解决方案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 由于某种原因运行缓慢，就会发生这种情况。

【讨论】：