特注の jQuery スクリプトを作成するときに、いつも 1 つの問題に悩まされるのはなぜですか。
とにかく怒鳴り散らしますが、親切な魂が私が間違っていることを教えてくれることを願って、私は皆さんに手を差し伸べています。
問題
サイトのドロップダウン jQuery ナビゲーション メニューを作成しましたが、カーソルを親からネストされた子に移動しようとすると、マウスが「ターゲット」を離れているとメニューだけが認識し、「hide()」関数を実行します。ドロップダウン メニューを非表示にします。
上記のシナリオが発生したときに、.dropnav 要素 (ドロップダウン メニュー) がコードの '$target.on('mouseover', function(e) {' 部分をトリガーしないようにする必要があります。
本当に立ち往生しているので、どんな助けでも大歓迎です。
jQuery コード
var hover, $this;
$target = $("header nav > ul > li");
$menu = $target.find('.dropnav');
$target.on('mouseover', function(e) {
e.stopPropagation();
clearTimeout(hover);
$this = $(this)
$this.toggleClass('active');
hide();
hover = setTimeout(show,400);
}).mouseout(function() {
clearTimeout(hover);
hover = setTimeout(hide,800);
});
if($(".dropnav:visible")) {
$menu.click(function(e) { e.stopPropagation(); });
$(document).click(function() { hide(); });
}
function show() {
$this.children('.dropnav').slideDown(800);
}
function hide() {
$('.dropnav:visible').fadeOut(200);
}
HTMLコード
<header>
<div id="nav-filler"></div>
<div id="header-inner">
<nav>
<ul>
<li>
<a id="products" title="Browse our products">Products</a>
<div class="dropnav">
<div id="dropnav-filler"></div>
<div id="dropnav-inner">
<ul id="products-menu" class="dropnav-links">
<li>
<h6>Desktops</h6>
<ul>
<li><a href="/products/desktops/pc-one" title="Broadleaf">PC One</a></li>
<li><a href="/products/desktops/pc-access" title="Broadleaf">PC Access</a></li>
<li><a href="/products/desktops/pc-max" title="Broadleaf">PC Max</a></li>
<li><a href="/products/desktops/pc" title="Flex">PC</a></li>
<li><a href="/products/desktops/all-in-one" title="All In One">All In One</a></li>
</ul>
<h6>Workstations</h6>
<ul>
<li><a href="/products/workstations/pcx" title="Broadleaf X">PC X</a></li>
<li><a href="/products/workstations/d4-rhino" title="D4 Rhino">D4 Rhino</a></li>
<li><a href="/products/workstations/d4-3ds" title="D4 3DS">D4 3DS</a></li>
<li><a href="/products/workstations/d4-inventor" title="D4 Inventor">D4 Inventor</a></li>
<li><a href="/products/workstations/rackstation" title="Rackstation">Rackstations</a></li>
</ul>
</li>
<li>
<h6>On The Go</h6>
<ul>
<li><a href="/products/onthego/laptops" title="Laptop">Laptops</a></li>
<li><a href="/products/onthego/tablets" title="Tablet">Tablets</a></li>
<li><a href="/products/onthego/ultrabooks" title="Ultrabook">Ultrabooks</a></li>
</ul>
</li>
</ul>
<div id="showcase">
<div id="sc-inner"></div>
</div>
</div>
</div>
</li>
<li>
<a id="products" title="Browse our products">Other Products</a>
<div class="dropnav">
<div id="dropnav-filler"></div>
<div id="dropnav-inner">
<ul id="products-menu" class="dropnav-links">
<li>
<h6>Desktops</h6>
<ul>
<li><a href="/products/desktops/pc-one" title="Broadleaf">PC One</a></li>
<li><a href="/products/desktops/pc-access" title="Broadleaf">PC Access</a></li>
<li><a href="/products/desktops/pc-max" title="Broadleaf">PC Max</a></li>
<li><a href="/products/desktops/pc" title="Flex">PC</a></li>
<li><a href="/products/desktops/all-in-one" title="All In One">All In One</a></li>
</ul>
<h6>Workstations</h6>
<ul>
<li><a href="/products/workstations/pcx" title="Broadleaf X">PC X</a></li>
<li><a href="/products/workstations/d4-rhino" title="D4 Rhino">D4 Rhino</a></li>
<li><a href="/products/workstations/d4-3ds" title="D4 3DS">D4 3DS</a></li>
<li><a href="/products/workstations/d4-inventor" title="D4 Inventor">D4 Inventor</a></li>
<li><a href="/products/workstations/rackstation" title="Rackstation">Rackstations</a></li>
</ul>
</li>
<li>
<h6>On The Go</h6>
<ul>
<li><a href="/products/onthego/laptops" title="Laptop">Laptops</a></li>
<li><a href="/products/onthego/tablets" title="Tablet">Tablets</a></li>
<li><a href="/products/onthego/ultrabooks" title="Ultrabook">Ultrabooks</a></li>
</ul>
</li>
</ul>
<div id="showcase">
<div id="sc-inner"></div>
</div>
</div>
</div>
</li>
</ul>
</nav>
</div>
http://jsfiddle.net/kYkba/11/これにアクセスできる人のためのリンク。
前もって感謝します。