我有一个按钮,用于使用 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,它没有任何样式。
最佳答案
感谢分享 CSS。这肯定是一个 CSS 问题。我看到您已经为类 .mobileonly
设置了 display:inline;
。将其更改为 display: block;
应该可以解决您的问题。
关于javascript - jquery - .slideToggle() First Click 不能正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15324186/