Как размыть элемент div? - PullRequest
Новая
       59

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

18 голосов
/ 11 августа 2009

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

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

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

не работает.

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

Ответы [ 6 ]

21 голосов
/ 28 июля 2011

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

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

16 голосов
/ 11 августа 2009

Я думаю, проблема в том, что div не запускает событие 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>
5 голосов
/ 20 августа 2009 
$("body").click(function (evt) {
     var target = evt.target;
     if(target.id !== 'menuContainer'){
            $(".menu").hide();
    }                
});

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

1 голос
/ 17 мая 2012

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

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

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

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

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

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

$('div > #focus_proxy').focus()
0 голосов
/ 31 мая 2012

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

$("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();
    }
});
0 голосов
/ 11 августа 2009

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

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