jquery - .slideToggle() First Click 无法正常工作答案

【问题标题】：jquery - .slideToggle() First Click doesn't work properlyjquery - .slideToggle() First Click 无法正常工作
【发布时间】：2013-03-10 15:53:21
【问题描述】：

我有一个按钮，用于使用 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，没有任何样式。

【问题讨论】：

它在我创建的小提琴中工作。你能创建一个显示这种行为的小提琴吗？ jsfiddle.net/k3YpW
请提供有关 jQuery 版本和您的浏览器的信息。
查看我的编辑以获取所需的详细信息。
@Jehanzeb.Malik 你的小提琴让我意识到我使用的是旧版本的 jQuery。我必须重新创建该网站的大部分内容才能将其放入小提琴中。我会看看我能做什么。
只是好奇，如果您删除 onclick="" 并在 $(document).ready() 中执行绑定，会解决问题吗？

标签： javascript jquery html slidetoggle

【解决方案1】：

感谢分享 CSS。这肯定是一个CSS问题。我看到你已经为.mobileonly 类设置了display:inline;。将其更改为 display: block; 应该可以解决您的问题。

Fiddle

【讨论】：

【解决方案2】：

没有关闭 </div> 标记。

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

【讨论】：

我刚刚意识到并添加了它，但不幸的是它没有解决问题。