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（）首先點擊不能正常工作

回答

相關問題