إظهار واختبئ القائمة على زر النقر فوق، واختبئها بنقرات خارجية

Question

لدي التعليمات البرمجية التالية التي تحتوي فقط على عناصر تتعلق بعنصر.

<ul class="controls">
    <li><button type="button" class="button1" value="somevalue">&nbsp;</button></li>
    <li><button type="button" class="optionsbutton" value="somevalue">&nbsp;</button></li>
    <li class="options">
        <ul>
            <li>Option 1 link</li>
            <li>Option 2 link</li>
            <li>Option 3 link</li>
       </ul>
    </li>
</ul>

يتم إخفاء قائمة الخيارات (UL في LI.Options) بشكل افتراضي في CSS (عبر العرض: لا شيء). أريد نقرة على زر "خيارات" (Button.OptionSbutton) للتبديل إظهار واختبئ UL، لكنني أريد أيضا أن انقر فوق زر خيارات أخرى (هناك العديد من العناصر باستخدام هذا الزر) لإغلاق أي قوائم مفتوحة وأحتاج إلى انقر في أي مكان ليس على زر لإغلاق القائمة أيضا. رمز مسج الخاص بي أدناه:

$('button.optionsbutton').click(
    function(event){
        // hiding any other open menus
        $('ul.controls li.options').hide();

        var OptionMenu = $(this).parent('li').siblings('.options');
        if ( OptionMenu.is(':visible') ) {
            $('ul.bit_controls li.bit_options').hide();
        } else {
            bitOptionMenu.css('display','block'); 
            //because show() sets display to list-item insteads of block
        } 

        event.stopPropagation();
    }
);

// So that clicks anywhere outside will close the menu
$('html').click(
    function(event){
        if(event.target != 'button.options' && $('button.options').is(':visible') ) {
            $('ul.controls li.options').hide();
        }
    }
);

يتم فتح القوائم بشكل صحيح عند النقر فوق الأزرار وإغلاقها عند النقر فوق زر آخر أو هناك نقرة خارج القائمة. ولكن، النقر فوق الزر نفسه مرتين لا يغلق القائمة! ما هي الصفقة هنا الناس، وأنا أعلم أنها سهلة لكنني كنت تغلب على رأسي ضدها لساعات.

Answer 1

الخط $('ul.controls li.options').hide(); من المحتمل أن تخفي القائمة الخاصة بك.

إذا كان هذا هو الحال، الاختبار if ( OptionMenu.is(':visible') ) سوف تعيد دائما كاذبة وإظهار القائمة.