جافا سكريبت الرسوم المتحركة القائمة المنسدلة

Question

أحاول إنشاء القائمة المنسدلة بوصفها القائمة الفرعية من القائمة الرئيسية.القائمة الفرعية هو مجرد عنصر div الذي يحتوي العناصر/الروابط.عند القائمة الرئيسية البند النقر على القائمة الفرعية يسقط ويبقى هناك.هذا كل شيء سهل ، ولكن أريد القائمة الفرعية إلى الشريحة مرة أخرى حتى إذا كان المؤشر أوراق القائمة الفرعية.وبعبارة أخرى, بسيطة 'mouseout' الحدث.ولكن يبدو أنه عندما المؤشر يدخل أحد العناصر داخل القائمة الفرعية ، mouseout' تشغيل الحدث.هذا ما كنت إلا إذا كنت تفكر في ذلك ، كما المؤشر لا يترك القائمة الفرعية عنصر على الرغم من أنه لا يترك لها boundries.بيد أن هذا لا يشكل مشكلة لأن أنا فقط أريد الحدث إلى النار إذا كان المؤشر يتحرك خارج boundries من القائمة الفرعية عنصر.

ما هو حقا يتلخص هو وجود واحد div داخل آخر div, مثل هذا:

----------------------------
|          DIV-1           |
|                          |
|      -------------       |
|      |           |       |
|      |   DIV-2   |       |   AREA OUTSIDE DIV-1
|      |           |       |
|      |           |       |
|      |           |       |
|      -------------       |
|                          |
|                          |
----------------------------

الآن, 2 الأشياء قد تسبب DIV-1 إلى النار 'mouseout' الحدث:

1. المؤشر يتحرك من داخل boundries من شعبة-1 إلى منطقة خارج تلك boundries
2. المؤشر يتحرك من داخل boundries من شعبة-1 إلى منطقة DIV-2

هدفي هو أن تكون قادرة على التمييز بين هذين أحداثا من واحد آخر ، ولكن أنا لم تكن قادرة على معرفة كيف.

هل لدى أحدكم حل جيد لهذه المشكلة ؟ يبدو شائع بما فيه الكفاية الميزة ، لذلك يجب أن يكون شخص ما حلها.

Answer 1

منذ تمرير الماوس الأحداث من الطفل عناصر فقاعة/للنشر إلى الوالدين, وأود أن استخدام الموقت الذي تم إلغاؤه في onmouseover الحدث من القائمة الفرعية هو div إذا كنت تسير في غير مكتبة المسار:

var hideMenuTimer;
subMenuDiv.onmouseover = function () {
    window.clearTimeout(hideMenuTimer);
}
subMenuDiv.onmouseout = function (evt) {
    evt = evt || window.event;
    if ((evt.target || evt.srcElement).id == "subMenuDiv")
        hideMenuTimer = window.setTimeout(function () {
            subMenuDiv.style.display = "none";
        }, 300);
}

مثال بسيط جدا ولكن يجب العمل على توفير جميع العناصر الفرعية من القائمة الفرعية div بشكل صحيح فقاعة onmouseover الحدث subMenuDiv العنصر ثم الموقت ألغيت قبل أن استطلاعات الرأي.أيضا, لقد وضعت 300ms مهلة لأنني أعتقد أنه من الأفضل أن يكون هذا النوع من الشيء بحيث إذا قمت بطريق الخطأ mouseout لديك نافذة قصيرة للحصول على الماوس مرة أخرى قبل أن يخفي.إذا كنت تريد أن تخفي على الفور ، إعداد 0ms يجب أن تعمل بشكل جيد جدا.

Answer 2

http://users.tpg.com.au/j_birch/plugins/superfish/ <- وفر على نفسك الوقت, انه بالفعل سحبت شعره لك (ربما ليس حرفيا, رغم أن, لا أعرف)