0

私の問題にはもっと説明が必要だと思います。ドロップダウンメニューをiPadで正しく機能させようとしています。トップレベルのメニュー項目とサブメニュー項目があります。トップレベルをタップすると、サブメニューがドロップダウンします。これは正しいです。次に、サブ メニュー項目の 1 つをタップすると、html ページが index.html (#!affordable-holidays.html) 内に読み込まれます。問題は、html が動的に読み込まれるときにサブレベルのドロップダウンが消えないことです。そのため、親アイテムをタップすると、サブメニューが永遠に表示されます。

ULを非表示にするために、動的にロードされたhtmlの上部にJavaScriptを配置するとうまくいくと思いました。

これは購入したテンプレートであるため、ページがどのように読み込まれるかについての正しい用語がわかりません。たとえば、mysite.com がインデックスで、別のページに移動すると mysite.com#!second-page.html になります。

ページの読み込み時にメニューで ul を非表示にするにはどうすればよいですか? これは私のhtmlです

<li><a href="#">Tester</a>
    <ul class="menu-hide">
       <li ><a href="#!pay-as-you-go.html"><span class="title">PAY AS YOU GO</span></a></li>
       <li ><a href="#!affordable-holidays.html"><span class="title">AFFORDABLE HOLIDAYS ALWAYS</span></a></li>
       <li ><a href="#!how-points-work.html"><span class="title">HOW POINTS WORK</span></a></li>
       <li ><a href="#!more-than-a-room.html"><span class="title">MORE THAN A ROOM</span></a></li>
    </ul>
</li>

これは私が見つけたJavaScriptで、私が望むものに近いものです:

<script type="text/javascript">$("div.menu-hide").hide()</script>

しかし、ul.menu-hide をターゲットにできないようです。私はこれを試しました

<script type="text/javascript">$("ul.menu-hide").hide()</script>
4

3 に答える 3

2

これを試して 

<script type="text/javascript">
  $(window).load(function () {

   $("div.menu-hide").hide()
  })
</script>

を使用することもできます

 $(window).ready(function () {

       $("div.menu-hide").hide()
      })

しかし違いは、すべてのグラフィックスがまだロードされていなくても、HTML ドキュメントがロードされ、DOM の準備が整ったときに、ドキュメント準備完了イベントがすでに実行されていることです。

ウィンドウ読み込みイベントは、すべてのフレーム、オブジェクト、および画像を含む完全なページが完全に読み込まれる少し後に実行されます。

よく読んだ

$(document).ready と $(window).load の比較

于 2012-09-25T11:29:38.440 に答える
2

document.ready 呼び出しが欠落しているようです

<script type="text/javascript">$(document).ready(function(){$("ul.menu-hide").hide()});</script>

また、jQuery ライブラリへのリンクが他の JavaScript の前に宣言されていることを確認してください

http://api.jquery.com/ready/

于 2012-09-25T11:30:45.523 に答える
1

JavaScript を使用してページの読み込み時に HTML 要素を非表示にすると、要素が表示されてから非表示になるときにちらつき効果が発生します。

css ファイルで要素を非表示にしてから、JavaScript で表示します。

CSS コード:

.menu-hide{ display: none; }

jQueryショーコード：

$(function(){
    $('.menu-hide').show();
});
于 2012-09-25T11:32:19.413 に答える