ホバーでカスケードする次のメニューがありますが、マウスがdivでホバーしている場合など、いくつかの条件付きチェックを追加して、メニューを下にスライドさせ続ける必要があります。
また、マウスをLIに合わせた場合は、メニューを確認してください。
ご覧のとおり、「div」を離れると、スライドして元に戻ります。
私は立ち往生しています...そしてifステートメントなどを何時間も検索しようとしましたが、構文が正しくありません。
ホバーでカスケードする次のメニューがありますが、マウスがdivでホバーしている場合など、いくつかの条件付きチェックを追加して、メニューを下にスライドさせ続ける必要があります。
また、マウスをLIに合わせた場合は、メニューを確認してください。
ご覧のとおり、「div」を離れると、スライドして元に戻ります。
私は立ち往生しています...そしてifステートメントなどを何時間も検索しようとしましたが、構文が正しくありません。
これが実際の例です
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');
});
});
の子にする<div>
と、イベントを終了してもキャンセルされません。
また、ネストされたリストからナビゲーションを作成する方がセマンティックであることに注意する必要があります (
<ul>
<li>Category
<ul>
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>
私はあなたのフィドルをいじろうとしましたが、マークアップと css はかなり混乱しています。
六道が言ったように、その子である div をそのようにする方がはるかに簡単です。最も単純なアコーディオン スケルトンを作成しました。ここで見ることができます。
それはあなたが望むすべてを行います。ただし、カスタマイズなどはお任せします。
マウスがそこを離れると、見出し div にホバーを付けていたので、ホバー効果が失われます。