Как размыть элемент div?

У меня есть раскрывающееся меню внутри DIV.

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

$('div').blur(function() { $(this).hide(); }

не работает.

Я знаю .blur работает только с <a>, но в этом случае самое простое решение?

Ответ 1

Я думаю, проблема заключается в том, что divs не запускают событие onfocusout. Вам нужно будет захватить события кликов на теле, а затем выработать, если целью было тогда меню div. Если это не так, тогда пользователь нажал в другом месте, а div должен быть скрыт.

<head>
  <script>
  $(document).ready(function(){
    $("body").click(function(e) {
      if(e.target.id !== 'menu'){
        $("#menu").hide();
      }      
    });
  });
  </script>
  <style>#menu { display: none; }</style>
</head>

<body>
  <div id="menu_button" onclick="$('#menu').show();">Menu....</div>
  <div id="menu"> <!-- Menu options here --> </div>

  <p>Other stuff</p>
</body>

Ответ 2

Попробуйте использовать атрибут tabindex в своем div, см.

Отметьте этот сообщение для получения дополнительной информации и демонстрации.

Ответ 3

$("body").click(function (evt) {
     var target = evt.target;
     if(target.id !== 'menuContainer'){
            $(".menu").hide();
    }                
});

дать div id, например, "menuContainer". то вы можете проверить target.id вместо target.tagName, чтобы убедиться, что это конкретный div.

Ответ 4

Не самый чистый способ, но вместо захвата каждого события клика на странице вы можете добавить пустую ссылку на свой div и использовать ее как "фокус-прокси" для div.

Таким образом, ваша разметка изменится на:

<div><a id="focus_proxy" href="#"></a></div>

и ваш код Javascript должен подключиться к событию размытия по ссылке:

$('div > #focus_proxy').blur(function() { $('div').hide() })

Не забудьте установить фокус на ссылку, когда вы показываете div:

$('div > #focus_proxy').focus()

Ответ 5

Я просто столкнулся с этой проблемой. Я думаю, что ни одно из вышеперечисленных вопросов не может исправить проблему, поэтому я отправляю свой ответ здесь. Это сочетание некоторых из приведенных выше ответов: по крайней мере, он исправил 2 проблемы, которые можно было бы выполнить, просто проверив, является ли точка клика одинаковой "id"

$("body").click(function(e) {
    var x = e.target;

    //check if the clicked point is the trigger
    if($(x).attr("class") == "floatLink"){
        $(".menu").show();
    } 
    //check if the clicked point is the children of the div you want to show 
    else if($(x).closest(".menu").length <= 0){
       $(".menu").hide();
    }
});

Ответ 6

.click будет отлично работать внутри тега div. Просто убедитесь, что вы не находитесь над верхней частью элемента select.

$('div').click(function(e) {
    var $target = $(e.target);
    if (!$target.is("select")) { $(this).hide() };
});