إخفاء القائمة على طمس

Question

لدي قائمة تظهر عند النقر على زر ، والمشكلة هي أنني أريد إخفاء القائمة كلما يفقد التركيز أي.ينقر المستخدم في أي مكان على الصفحة ، ولكن ليس في تلك القائمة.كيف يمكنني أن أفعل هذا?أيضا ، يمكنك أن ترى كيف ينبغي أن ننظر في last.fm ، أين قائمة إعدادات الملف الشخصي (li.profileItem). (ul.del li ul افتراضيا هو display:none) هيكل القائمة الأساسية:

<ul class='del'>
    <li>
        <button class='deletePage'></button>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
</ul>

وظيفتي لعرض هذه القائمة:

$(".deletePage").click(function(){
    if( $(this).siblings(0).css("display") == "block" ){
        $(this).siblings(0).hide();
    } else {
        $(this).siblings(0).show();
    }
});

Answer 1

نرى كيفية اكتشاف نقرة خارج عنصر؟

يمكنك ربط أ click معالج ل document لإخفاء القائمة ، ثم قم بإرفاق معالج منفصل بالزر الذي يستدعي event.stopPropagation.

$(document).click(function() {
 $('.list-to-hide').hide();
});

$('.show-list-button').click(function(event) {
 event.stopPropagation();
});

بدلاً من ذلك ، يمكنك استخدام المكوّن الإضافي jQuery Outside Events:

$('.show-list-button').bind('clickoutside', function() {
 $('.list-to-hide').hide(); 
});

Answer 2

الدفع البرنامج المساعد "الأحداث الخارجية" لـ Ben Alman الذي يضيف القدرة على bind('clickoutside') للتعامل مع أشياء مثل هذا.

Answer 3

يمكنك استخدام حدث النقر فوق المستند.إذا نقر المستخدم داخل ديف يتوقف انتشار الحدث هناك (ه.ستوبروباغاتيون) آخر سيتم التعامل معها من قبل الحدث انقر فوق المستند الذي يتحقق إذا كانت القائمة مفتوحة وإذا كان يتم إغلاقه.

$(document).click(function() { 
  // check if the menu is open, if so close it
});

$("#windowdiv").click(function(e){
  e.stopPropagation();
  // do stuff
});