1

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 に更新すると、動作が改善されました。最初のクリックはまだ期待どおりに動作しませんが、2 回目のクリックで元に戻ります (展開されたことを認識します)。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 にのみ使用され、スタイルはありません。

4

2 に答える 2

2

cssを共有していただきありがとうございます。それは確かにCSSの問題です。display:inline;classに設定されていることがわかります.mobileonly。に変更するとdisplay: block;、問題が解決するはずです。

フィドル

于 2013-03-10T18:21:21.933 に答える
1

近い</div>タグがありませんでした。

<div id="menuslide" class="infodiv mobileonly" style="display:none; list-style:none; font-size:24px;">
</div>
于 2013-03-10T15:59:39.030 に答える