2

こんにちは、メニューを作成していて、マウスの次の動きを検出する必要があります。現在、次の要素を使用event.relatedTargetして取得しています。event.relatedTarget.idメニューのcssにいくつかの変更を加える必要があるまで機能したので、削除してoverflow: hidden;使用する必要がありdisplay: inline-block;ました。今起こっていることはevent.relatedTarget、マウスをメニュー項目にすばやく引っ張った場合を除いて、空の文字列です。コードの一部を投稿し、jsfiddle にすべてを掲載します。アイデアはありますか？

プロジェクトへのリンク

Navigation.top_links.on('mouseleave', function (event) {
                var sub_wrapper = $('.sub-wrapper'),
                        target_id = event.relatedTarget.id;

                console.log(event.relatedTarget.id);

                console.log(event.relatedTarget.id);
                if (target_id == 'got_me_sections' || target_id == 'got_me_products' || target_id == 'ind_sections' || target_id == 'ind_products') {                    
                    console.log('mouse down to items');
                    return false;
                }

                sub_wrapper.removeClass('sections').removeClass('products');
                sub_wrapper.hide();
            });

その多くのhtmlなので、ちょっと面倒です、ごめんなさい。

<ul id="top_nav">
                <li class="first"><a href="#" id="sections" class="nav-link">sections</a></li>
                <li><a href="#" id="products" class="nav-link">products</a></li>              
                <li>
                    <div id="nav_cart">
                        <div class="gfx-div-cart"></div>
                    </div>  
                </li>                
            </ul>         

        <div id="sub_nav">

            <div id="sub_sections" class="sub-wrapper">
                <div id="got_me_sections" class="top-space">
                    <div id="ind_sections" class="indicator"></div>
                </div>
                <div class="nav-items-wrapper">
                    <div class="nav-items-breadcrumb">
                        <ul class="breadcrumb">
                            <li class="bc first">sections</li>
                            <li class="bc last">&nbsp;</li>
                        </ul>
                    </div>
                    <div class="nav-items">
                        <ul class="nav-items-list">

                                   <li><a href="#" class="nav-item">item.Name</a></li>

                        </ul>
                    </div>
                </div>
            </div>
            </div>
4

1 に答える 1

1

cssを追加することでこれを解決しました<div id="sub_nav">...</div>

マイナスでコンテナを少し上に移動しましたmargin-top: -4px;

于 2012-05-15T06:42:34.577 に答える