1

jquery初心者です。希望は、水平メニュー バー項目を表示/非表示にすることです。私は成功せずに何度か繰り返してみました。

CSS は動作し、スタイルが設定されており、onload イベントでタグ クラスを「アクティブ」に設定する JavaScriptliですa。私は何が欠けていますか？エラーはjqueryにあると結論付けていますが、それほど単純ではありません。説明が役立ちます。既存の html を使用する提案をいただければ幸いです。

div id=menu の主な目的は、バーを中央に配置できるようにすることです。

私のスクリプト

編集 1

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

$(document).ready(function() {
    $('#nav li').hover(function() {
        //show its submenu
        $('ul', this).slideDown(100);
    }, function() {
        //hide its submenu
        $('ul', this).slideUp(100);
    });
});​

私のHTML

<div id="menu">
    <ul id="nav">
        <li id="lhome" class="">
            <a href="index.php" id="ahome" class="">Home</a>
        </li>
        <li id="lprod" class="">
            <a href="products.php" id="aprod" class="">Products</a>
            <ul>
                <li><a href="#">Link one</a></li>
                <li><a href="#">Link two</a></li>
                <li><a href="#">Link three</a></li>
                <li><a href="#">Link four</a></li>
            </ul>
        </li>
        <li id="ltest" class="">
            <a href="testimonial.php" id="atest" class="">Testimonials</a>
            <ul>
                <li><a href="#">Link one</a></li>
                <li><a href="#">Link two</a></li>
                <li><a href="#">Link three</a></li>
                <li><a href="#">Link four</a></li>
            </ul>
        </li>
        <li id="lcont" class="">
            <a href="contact.php" id="acont" class="">Contact&nbsp;Us</a>
        </li>
    </ul>
</div>
4

1 に答える 1

0

既存のコードは正常に動作しているようです。DEMOを参照してください

編集

フィードバックに基づいてさらに調査を行ったところ、CSS がアニメーションに干渉していることがわかりました。

上でリンクした元のデモを見ると、スタイルがないことがわかります。スライドの上下に指定された 100 ミリ秒かかります。

CSS を使用してDEMOを見ると、メニューが表示されていることがわかります。

少し試行錯誤した後、これを引き起こしているCSSを特定しました。CSS から以下のセクションを削除すると、サブメニューのアニメーションが期待どおりに再び機能します。

/* Make the sub menus appear on hover */
#menu ul li:hover ul,
#menu ul li.hover ul { /* This line is required for IE 6 and below */
   display:block; /* Show the sub menus */
}

上記の CSS は、スライド ダウン/アップ メソッドからのアニメーションを上書きし、代わりにサブメニューを単にブロックとして表示します。IE6 の修正をそのままにしても機能しますが、次の CSS を削除する必要があります#menu ul li:hover ul。

/* Make the sub menus appear on hover */
#menu ul li.hover ul { /* This line is required for IE 6 and below */
   display:block; /* Show the sub menus */
}

変更をフィドルに適用しましたが、現在は機能しています。デモ
を見る

于 2012-08-05T22:03:38.687 に答える