[英]jquery - .slideToggle() First Click doesn't work properly
我有一個按鈕,用於使用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問題。 我看到你設置了display:inline;
上課.mobileonly
。 將其更改為display: block;
應該解決你的問題。
沒有關閉的</div>
標簽。
<div id="menuslide" class="infodiv mobileonly" style="display:none; list-style:none; font-size:24px;">
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.