jquery - .slideToggle（）First Click无法正常工作

Question

我有一个按钮，用于使用jquery的slideToggle（）函数展开隐藏的div（使用display：none;隐藏）。 代码如下：

<button class="mobileonly singlebutton" style="color:#FFFFFF; font-size:20px;" title="Expand Menu" onclick="$('#menuslide').slideToggle('fast');">Quick Links Menu</button>
<br />
<div id="menuslide" class="infodiv mobileonly" style="display:none; list-style:none; font-size:24px;">

第一次单击不会滑出div，而只是显示信息。 不仅如此，还没有应用“infodiv”类风格。 然后，当我再次单击它时，它会滑出（即使它已经出来，它的行为就像它已经存在）并且应用了“infodiv”类样式。 所以这只是第一次发生。 为什么？

编辑：我刚刚意识到我正在运行jQuery 1.7.2，所以我更新到jQuery 1.9.1并且行为有所改进。 第一次单击仍未按预期执行，但第二次单击现在将其恢复（识别它已展开）。 我正在iPhone上的移动Safari中测试这个。

EDIT2：以下是应用于div的CSS

.infodiv
{
background-color:#FFFFFF;
border:1px solid #FFFFFF;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
width:480px;

-webkit-box-shadow: 0px 0px 8px #888888;
-moz-box-shadow: 0px 0px 8px #888888;
box-shadow: 0px 0px 8px #888888;
color:#000000;
padding:3px;
}
.mobileonly
{
display:none;
visibility:hidden;
}
@media only screen /* only for mobile devices apply the following */
and (max-width : 550px)
{
.mobileonly
{
    display:inline;
    visibility:visible;
}

.infodiv
{
    width:400px;
    font-size:14pt;
}
}

div上的id仅用于javascript，它没有任何样式。

Answer 1

谢谢你分享css。 这肯定是一个CSS问题。 我看到你设置了display:inline; 上课.mobileonly 。 将其更改为display: block; 应该解决你的问题。

小提琴

Answer 2

没有关闭的</div>标签。

<div id="menuslide" class="infodiv mobileonly" style="display:none; list-style:none; font-size:24px;">
</div>