2009-08-08 4 views
0

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

<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> 

Меню опций (ули в 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(); 
     } 
    } 
); 

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

ответ

2

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

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

+0

О, я вижу, спасибо! Я должен был подумать. Я переместил «$ (« ul.controls li.options »). Hide();" (тот, который находится под // скрывающим все другие комментарии открытого меню, и переместил его прямо перед «bitOptionMenu.css (« display »,« block »);« – Diogenes

+0

». Приостановлено, чтобы противостоять (грустно необъясненному) проголосованию, в отношении вашего решения проблемы OP. –