2

まず第一に、ドロップダウンリストの作成方法を示すチュートリアルがたくさんあることは知っていますが、限られた知識で非常に単純なものを作成するために自分自身を試してみたかったのです。間違っていますが、それでも試してみたいです。

これが私の問題です。htmlでulとliを設定し、マウスが入るとサブメニューをslideDownし、マウスが離れるとサブメニューをslideUpする単純なjqueryコードを設定しましたが、まったく正しく動作しません.

コード：

<div style="width:200px; height:400px;">
    <ul id="ul" class="menu" style="border:thin solid #090;">
        <li id="li">Test
        <ul id="ull">
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test 4</li>
        </ul> 
        </li>
        <li id="li">Test 2A
            <ul id="ull">
                <li>Test 3A</li>
                <li>Test 4A</li>
            </ul>
        </li>
    </ul>
</div>




    <script>
    $(document).ready(function(){
        $("#ul ul").css({"color":"red","font-size":"30px"}).hide();
    });

    $("#li").mouseenter(function(){
        $("#ull").slideDown(400).show();    
    });

    $("#li").mouseleave(function(){
        $("#ull").slideUp(400).hide(100);
    });

    </script>

これはすべて 1 つの HTML 内にあります。私は他に何も使用していません。クラス「メニュー」がまさにこれである CSS を期待します。display:inline-block;

問題は、ドロップダウン メニューが正常に機能しないことです。マウスをテストの上に移動すると、サブメニューが表示されますが、これはテスト 2A では発生しません。また、ドロップダウン リストが「ドロップ」すると、テスト 2A がその下にも続きます。

問題を簡単に説明できないので、理解に役立つjsfiddleをセットアップします。

繰り返しますが、これが正しくないことはわかっています。他の方法を使用する必要がありましたが、これまでに学んだいくつかのことを使用して単純なドロップダウン リストを作成してみました。

前もって感謝します。

4

2 に答える 2

1

ID は一意である必要があります。

 <li id="li">Test

 <li id="li">Test 2A

別の ID に変更するか、class

修正されたフィドル

Id またはクラスとしてliandを使用しないでください。これらは予約済みのキーワードです。混乱を招きます。ul

于 2013-05-30T09:02:27.837 に答える