jQuery的.slideToggle（）首先点击不能正常工作

我有一个用于扩展隐藏DIV的按钮。代码如下：jQuery的.slideToggle（）首先点击不能正常工作

<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;">

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

编辑：我才意识到我正在运行的jQuery 1.7.2，所以我更新到1.9.1的jQuery和行为有所改善。第一次点击仍然没有按预期执行，但第二次点击现在使其恢复（确认它已扩展）。我在iPhone上的移动Safari中测试这个。

EDIT2：下面是应用于div

.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，它没有任何样式。

来源

2013-03-10 muttley91

它是在我创建的小提琴工作。你能创建一个演示这种行为的小提琴吗？ http://jsfiddle.net/k3YpW/ – 2013-03-10 16:00:48

请提供关于jQuery的版本和浏览器的信息。 – Warlock 2013-03-10 16:08:26

请参阅我的编辑了解所需的详细信息。 – muttley91 2013-03-10 16:11:52

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

Fiddle

来源

2013-03-10 18:21:21

谢谢，这个修好了！ – muttley91 2013-03-10 18:44:46

很高兴可以帮助:) – 2013-03-10 18:47:31

密切</div>标签缺席。

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

来源

2013-03-10 15:59:39 Warlock

我刚刚意识到这一点，并添加它，但不幸的是没有解决问题。 – muttley91 2013-03-10 16:03:13

你有没有试过Jehanzeb.Malik的例子jsfiddle.net/k3YpW？ – Warlock 2013-03-10 16:06:05

是的，它工作，虽然我不幸。 – muttley91 2013-03-10 16:14:43

jQuery的.slideToggle（）首先点击不能正常工作

回答

相关问题