Отображение и скрытие меню при нажатии кнопки и скрытие его с помощью внешних нажатий - PullRequest
Новая
       21

Отображение и скрытие меню при нажатии кнопки и скрытие его с помощью внешних нажатий

0 голосов
/ 09 августа 2009

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

<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, но я также хочу нажать на любую другую кнопку параметров (есть много элементов с этой кнопкой), чтобы закрыть все открытые меню, и мне нужно нажмите в любом месте не на кнопку, чтобы закрыть меню, а также. Мой код 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();
        }
    }
);

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

1 Ответ

2 голосов
/ 09 августа 2009

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

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

...