أحداث JQuery Mouseenter و Mouseout مع. Toggle () العكس عندما يكون الماوس بالفعل عبر Onload Onload؟

Question

لدي قائمة منسدلة تعمل بشكل رائع مع التعليمات البرمجية التالية:

$('#menu ul li').mouseenter(function(){
    $(this).children(".dropdown").toggle();
}).mouseleave(function(){
    $(this).children(".dropdown").toggle();
});

هذا يعمل كما تتوقع. المشكلة هي أنه إذا كان الماوس بالفعل mouseenter على ال $('#menu ul li') عندما $(document).ready(function(){ }) يتم إطلاقه، والتبديل يعمل في الاتجاه الآخر جولة؟

كيف يمكنني تجنب ذلك؟

على سبيل المثال: http://screenr.com/wbd.

Answer 1

لا تريد أن تفعل show() على mouseenter و hide() على mouseleave?

Answer 2

بدلا من مجرد الاتصال toggle مع عدم وجود حجج، يمكن أن تمر مع معالجات أحداث الماوس الخاصة بك في منطقية صريحة showOrHide القيم. يمر true ل toggle() في ال mouseenter روتين، و false في mouseleave. وبعد أو القيام به كما اقترح من خلال الإجابة الأخرى واستخدام فقط show و hide.

Answer 3

عند تحميل المستند دون تحريك الماوس، لن يتم تبديل إجراء Uperover حتى تقوم بنقل الماوس. لكنني أعتقد أن Mouseover يتم تبديله كتحرك الماوس، والحدث إذا كان بالفعل "فوق" Onload.

ماذا عن هذا الرمز؟ على أي حال، أعتقد أن علة الخاص بك يأتي من Mouseout لا يتم تبديده لأن JS فقط يتحقق من كل X MS، وإذا نقلت بسرعة كبيرة، فستخرج من Div دون استدعاء الحدث.

$('#menu ul li').mouseenter(function(){
    // hide all other divs
    $(".dropdown").hide(0);
    // show the div we want
    $(this).children(".dropdown").show(0);
}).mouseleave(function(){
    $(".dropdown").hide(0);
});

إذا كنت لا تهتم بالرسوم المتحركة، فإن القيام بذلك مع CSS هو دائما طريقة أفضل ثم مع JS.

ستحتاج إلى إعداده مثل هذا:

<div id="menu">
    <ul>
        <li>
            Menu 1
            <div class="dropdown">Sub1</div>
            <div class="dropdown">Sub2</div>
        </li>
        <li>
            Menu 2
            <div class="dropdown">Sub1</div>
            <div class="dropdown">Sub2</div>
        </li>
    </ul>
</div>

CSS:

.dropdown { display: none; position: relative; }
#menu li:hover .dropdown { display: block; }