サブナビゲーションメニューの上下のスライドを処理する次のスクリプトがあります。
$j('body').ready(function() {
$j('.box').hover(function() {
$j(this).find('.sub-menu').slideDown(500);
},
function() {
$j(this).find('.sub-menu').slideUp(500);
});
});
スライドダウンは正常に機能しますが、スライドアップはまったく機能しませんでした。代わりに、.box div を離れると、サブ メニューが突然消えてしまいました。そこで、.box を含む div に 4px のパディングを追加し、左右に 4px を追加しました (これは余裕がある限りです!)。マウスがdivを左または右にゆっくりと離れると、slideUp効果が得られますが、通常の速度でそうすると、まだ上にスライドしません。このページにアクセスして、2 番目のナビゲーション アイテム (「ニュース」) にカーソルを合わせると、私の言いたいことがわかります。
パディングはマウス ポインターが div を離れるのを検出するのに役立ったようですが、slideUp 関数はまだうまく機能していません。nav リストの「ニュース」項目の HTML は次のとおりです。
<li id="menu-item-144" class="menu-item menu-item-type-post_type menu-item-object-page">
<div class="box">
<div class="top_nav"></div>
<div class="clear">
<div class="bottom_nav"><div class="left_nav"></div><div class="center_nav"><a href="http://soteriabrighton.co.uk/news/">news</a></div><div class="right_nav"></div></a></div></div>
<ul class="sub-menu">
<li id="menu-item-459" class="menu-item menu-item-type-post_type menu-item-object-page">
<div class="box">
<div class="top_nav"></div>
<div class="clear">
<div class="bottom_nav"><div class="left_nav"></div><div class="center_nav"><a href="http://soteriabrighton.co.uk/news/events/">events</a></div><div class="right_nav"></div></a></div></div>
</li>
</ul>
</li>