Отображение и скрытие меню при нажатии кнопки, а также скрытие его внешними нажатиями

StackOverflow https://stackoverflow.com/questions/1249993

Вопрос

У меня есть следующий код, который содержит элементы управления, относящиеся к элементу.

<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 (через display:none).Я хочу нажать кнопку параметров (button.optionsbutton), чтобы переключить отображение и скрытие ul, но я также хочу нажать любую другую кнопку параметров (с этой кнопкой есть много элементов), чтобы закрыть все открытые меню, и мне нужен щелкните в любом месте, кроме кнопки, чтобы закрыть меню.Мой код JQuery приведен ниже:

$('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();
        }
    }
);

Меню открываются правильно при нажатии кнопок и закрываются при нажатии другой кнопки или щелчке за пределами меню.НО, нажатие на одну и ту же кнопку дважды меню не закрывает!В чем тут дело, ребята, я знаю, что это легко, но я уже несколько часов ломаю голову над этим.

Это было полезно?

Решение

Линия $('ul.controls li.options').hide(); вероятно, скроет ваше меню.

Если это так, тест if ( OptionMenu.is(':visible') ) всегда будет возвращать false и показывать меню.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top