2

ホバーでカスケードする次のメニューがありますが、マウスがdivでホバーしている場合など、いくつかの条件付きチェックを追加して、メニューを下にスライドさせ続ける必要があります。

また、マウスをLIに合わせた場合は、メニューを確認してください。

ご覧のとおり、「div」を離れると、スライドして元に戻ります。

私は立ち往生しています...そしてifステートメントなどを何時間も検索しようとしましたが、構文が正しくありません。

私の例

4

4 に答える 4

2

これが実際の例です

HTML

<div id="leftWrap">
    <div id='accordion'>
        <ul>
           <li><div>Absorption</div>
               <ul style="display: none;">
                   <li>Accessories</a>
                       <ul style="display: none;">
                           <li>AA500AFG</li>
                           <li>AA500F</li>
                           <li>AA500G</li>
                           <li>AA990F</li>
                       </ul>
                   </li>
                   <li>Consumables</li>
                   <li>Products</li>
               </ul>
           </li>
           <li><div>Fluorescence</div>
               <ul style="display: none;">
                   <li>Accessories</li>
                   <li>Consumables</li>
                   <li>Products</li>
               </ul>
           </li>
       </ul>
    </div>
</div>

JavaScript/JQuery

jQuery(document).ready(function() {
    $('#accordion ul > li').hover(function() {
        $(this).children("ul").slideToggle('slow');
    });
});

私に言わせれば、このようなことに mousehover/mouseenter を使用すると、非常に面倒になります。最初のホバーなどの後にクリックイベントを使用することをお勧めします。これにより、ユーザーはそのすべての動きに悩まされなくなります。

jQuery(document).ready(function() {
    $('#accordion ul:first-child > li').hover(function() {
        $(this).children("ul").slideToggle('slow');
    });

    $('#accordion ul:not(:first-child) > li').click(function(){
        $(this).children("ul").slideToggle('slow');
    });
});
于 2011-09-14T10:37:14.047 に答える
2

の子にする<div>と、イベントを終了してもキャンセルされません。

また、ネストされたリストからナビゲーションを作成する方がセマンティックであることに注意する必要があります (

  • カテゴリー
    • アイテム
    • アイテム
<ul>
    <li>Category 
        <ul>
            <li>Item</li>
            <li>Item</li>
        </ul>
    </li>
</ul>
于 2011-09-14T09:36:27.180 に答える
1

私はあなたのフィドルをいじろうとしましたが、マークアップと css はかなり混乱しています。

六道が言ったように、その子である div をそのようにする方がはるかに簡単です。最も単純なアコーディオン スケルトンを作成しました。ここで見ることができます。

それはあなたが望むすべてを行います。ただし、カスタマイズなどはお任せします。

于 2011-09-14T09:59:15.033 に答える
1

http://jsfiddle.net/dttdB/13/

マウスがそこを離れると、見出し div にホバーを付けていたので、ホバー効果が失われます。

于 2011-09-14T09:59:54.033 に答える