3

div内にナビゲーションバー（トップメニュー）があります。メニューの幅が外側のdivの幅よりも大きい場合は、残りのメニュー要素を非表示にする必要があります。残念ながらoverflow:hidden、divには使用できません。そのため、 .outerWidth()関数を使用してdivの合計幅と各要素（li）の幅を計算し、オーバーフロー要素を非表示にします。だから私の問題は、firefox（19.0）、IE（8）！で正常に動作することですが、chromeでは動作しません。クロムでは、すべての要素が非表示になっています。変更すると問題は解決します

$(document).ready(function() {});に$(window).load(function() {});

しかし、その後、合計ulがほんの一瞬表示され、その後非表示になります（IE、FFは引き続き正常に機能します）。これに対するより良い解決策はありますか？または別のロジック。

サンプル

<div style="width:300px;" > 
<ul id="menu1">
    <li class="noChild "><a  href="#" >3 Option</a></li>
    <li class="noChild"><a href="#" >2 Option</a></li>
    <li class="noChild "><a  href="#" >1 Option</a></li>
 </ul>
</div >

http://jsfiddle.net/RSA3X/4/

私の同様のケース

4

1 に答える 1

3

実際、解決策は簡単でした。複雑にしました。下の画像では、スクリプト、画像、および css をロードするプロセスも確認できます。私の場合、cssの上にスクリプトリンクを追加しました

<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='menu.js'></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

画像2のように読み込まれるので、cssが読み込まれる前にスクリプトが実行されます。そして、CSSのプロパティを取得できませんでした。

として位置を変更したとき

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script type='text/javascript' src='jquery.js'></script>
    <script type='text/javascript' src='menu.js'></script>

私のスクリプトは、CSSのロードが完了した後に実行されます(画像1)。だから今は完璧に動作します。

ここに画像の説明を入力

于 2013-02-28T10:30:07.373 に答える