Нажмите внешнее меню для закрытия в jQuery

Question

Нажмите внешнее меню для закрытия в jQuery

Таким образом, у меня есть выпадающее меню, которое показывает при щелчке согласно бизнес-требованиям. Меню становится скрытым снова после Вас мышь далеко от него.

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

Это - упрощенная версия того, что я имею теперь:

$(document).ready(function() {
  $("ul.opMenu li").click(function(){
   $('#MainOptSubMenu',this).css('visibility', 'visible');
  });

  $("ul.opMenu li").mouseleave(function(){
      $('#MainOptSubMenu',this).css('visibility', 'hidden');
  });
});



<ul  class="opMenu">
  <li id="footwo" class="">
    <span id="optImg" style="display: inline-block;"> <img src="http://localhost.vmsinfo.com:8002/insight/images/options-hover2.gif"/> </span>
      <ul id="MainOptSubMenu" style="visibility: hidden; top: 25px; border-top: 0px solid rgb(217, 228, 250); background-color: rgb(217, 228, 250); padding-bottom: 15px;">
        <li>some</li>
       <li>nav</li>
       <li>links</li>
       </ul>
    </li>
</ul>

Я попробовал что-то вроде этого $('document[id!=MainOptSubMenu]').click(function() думая это включило бы что-либо, что не было меню, но это не работало.

106

jquery

задан George 19 May 2010 в 19:08

3 ответа

Другие вопросы по тегам:

jquery

Похожие вопросы:

score 194 · Answer 1

Взгляните на подход, использованный в этом вопросе:

Как определить щелчок вне элемента?

Прикрепите событие щелчка к тексту документа, которое закрывает окно. Прикрепите к окну отдельное событие щелчка, которое останавливает распространение в тексте документа.

$('html').click(function() {
  //Hide the menus if visible
});

$('#menucontainer').click(function(event){
    event.stopPropagation();
});

score 17 · Answer 2

Если использование подключаемого модуля в вашем случае нормально, то я предлагаю подключаемый модуль Бена Алмана, расположенный здесь :

, его использование очень простое:

$('#menu').bind('clickoutside', function (event) {
    $(this).hide();
});

надеюсь, это поможет.

score 8 · Answer 3

2 варианта, которые вы можете изучить:

При отображении меню поместите за ним большой пустой DIV, закрывающий остальную часть страницы, и нажмите на него. событие для закрытия меню (и самого себя). Это похоже на методы, используемые с лайтбоксами, когда щелчок по фону закрывает лайтбокс
При отображении меню прикрепите обработчик события одноразового щелчка к телу, закрывающему меню. Для этого вы используете jQuery .one ().