0

ドロップダウン メニューにカーソルを合わせたときに 1 つの列のみを選択する方法を見つけるのに助けが必要です。機能しますが、すべてのサブメニュー項目が下にスライドします。ホバーしたものだけがそうするようにしたいのですが、次にホバーすると、前のものが閉じて、次のものだけが開いたままになります。これが私の HTML/CSS コードと JS です。ありがとう。

<head>
    <title>Hover-Dropdown</title>
    <link rel="stylesheet" href="css/style.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/jquery-1.10.2.js"></script>

    <style> 

    ul{list-style: none;}
    .itemList{padding: 0;margin-top: 10px;}
    .column{float: left;width: 100px;margin: 0 auto;}
    .menu .column a:hover{color:red;}
    </style>

    <script>

            $(document).ready(function(){
                $('.menu .column .itemList li').hide();
                    $('.menu .column .title').hover(function(){
                        $('.menu .column .itemList li').slideDown('slow');
                });
                    $('.menu .column').mouseleave(function(){
                        $('.menu .column .itemList li').slideUp('slow');
                });
            });

    </script>




</head>

<body>

    <ul class="menu">

        <li class="column">
            <a class="title" href="#">Title 1</a>

            <ul class="itemList">

                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
                <li><a href="#">Item 5</a></li>

            </ul>
        </li>

        <li class="column">
            <a class="title" href="#">Title 2</a>

            <ul class="itemList">

                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
                <li><a href="#">Item 5</a></li>

            </ul>
        </li>

        <li class="column">
            <a class="title" href="#">Title 3</a>

            <ul class="itemList">

                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
                <li><a href="#">Item 5</a></li>

            </ul>
        </li>
    </ul>

</body>

4

2 に答える 2

0

HTML 構造の簡単な要約から始めましょう。ここで問題はありませんが、問題の説明に役立ちます。

ul.menu
    li.column
        a.title
        ul.itemList
            li
    li.column
        a.title
        ul.itemList
            li
    ...

次に、コードに加えた変更を見てみましょう。

まず、hoverセレクターを から.menu .column .titleに変更しまし.menu .columnた。残しておくこともできましたが、削除したことでコードがきれいになりました。したがって、この変更は純粋に表面的なものと考えてください。:)

表示される大きな変更点は、 と の 2 行にslideDownありslideUpます。まず、あなたのコードが何をしたかを説明させてください。

$('.menu .column .itemList li').slideDown('slow');

jQueryを使用するときは常に$(selector).something()、DOM であるツリー構造の最上部から開始し、一致する要素を探します。あなたの場合、それは多くを見つけるでしょう。実際、サブメニューのすべての項目がこの説明に一致します。それがすべてのメニューが表示された理由です。

$(this).find('ul li').slideDown('slow');

行を上記のように変更すると、検索の開始位置が固定されthisます (JS/jQuery についてよくわからない場合はthis、それに関する良い記事を見つけてみてください)。この特定のケースthisでは、常に、ホバーされている特定の列要素への参照になります。

要約

$('selector').something(); //Starts a search for the selector at the document root
$(this).find('selector').something(); //Starts a search at "this" element

グローバル検索とローカル検索のようなものだと考えてください。

于 2013-10-24T21:53:30.443 に答える
0

これを使用してみてください：

            $('.menu .column .title').hover(function(){
                    $(this).next('.itemList').slideDown('slow');
            });
于 2013-10-24T22:03:24.283 に答える