Как скрыть элемент DIV, когда я выхожу наружу

У меня есть div и хочу скрыть его, когда я нажимаю на него. Мой код:

<div id="mydiv">The div must be above button</div>

    $('#mydiv').click(function(e) {
        e.stopPropagation();
    });

    $(document).click(function() {
        $('#mydiv').fadeOut(300);
    });

Но это не работает для меня...

UPDATE

Полный код представлен ниже. Когда я нажимаю на кнопку, она показывает div выше, поэтому мне нужно скрыть это div, когда я нахожусь снаружи.

DEMO

<div id="but" style="text-align: right;"><button type="button">Show Div!</button></div>
<div id="mydiv" style="display:none;">The div must be above button</div>

$("#but button").click(function(){
  var pos = $(this).offset(),
      div = $("#mydiv");

  // Make it visible off-page so
  // we can measure it
  div.css({
    "display": "block",
    "border": "1px solid black",
    "position": "absolute",
    "left": -10000,
    "top": 0
  });

  // Move it where we want it to be
  div.css({
    "left": pos.left - 40,
    "top":  pos.top - div.height() - 10
  });
});

$('#myDiv').click(function(e) {
    e.stopPropagation();
});
$(document).click(function() {
    $('#mydiv').fadeOut(300);
});

Ответ 1

В javascript нажмите будет событие барботирования, оно начинается с div и увеличивается до документ. Когда вы останавливаете распространение события с помощью функции stopPropagation(), щелчок по документу не обрабатывается. Итак, чтобы решить вашу проблему, просто удалите e.stopPropagation().

DEMO 1

Лучший способ:

$('#mydiv').click(function(e) {
    e.stopPropagation();
    $(this).fadeOut(300);
});

DEMO 2

Если я нажму на этот div, как сделать, чтобы щелкнуть снаружи и скрыть этот div

Хорошо, представьте себе, что когда вы нажимаете на контейнер с идентификатором "wrapperId", "myDiv" должен быть скрыт:

$("#wrapperId").click(function(e){
  $('#mydiv').fadeOut(300);
})

Если контейнер является документом, вы можете использовать $(document) вместо $("#wrapperId").

DEMO 3

Не работает посмотреть, что происходит: jsbin.com/ilowij/7

Вы должны прекратить распространение события клика при нажатии кнопки. Внесите следующие изменения:

$("#but button").click(function(e){
    e.stopPropagation();
    ...
}

DEMO 4

Ответ 2

Попробуйте использовать код ниже, который проверяет цель события

 $(document).click(function(e) {
  if(e.target.id!="mydiv"){  // if click is not in 'mydiv'
    $('#mydiv').hide(3000);
  }
});

Ответ 3

Лучше, чем привязать событие клика к документу, вы можете использовать этот вид фрагмента:

СМОТРЕТЬ ДЕМО

$('#mydiv').click(function(e) {
        e.stopPropagation();
    })
    .css({outline:0})
    .focusout(function(){
         $(this).fadeOut(300);  
    }).focus();

Ответ 4

проверьте этот

<a href="#" id="link">Click me</a>

показать или скрыть меня, нажав

    (function($) {

  $("#link").click(function(e){
    e.stopPropagation();
    var div = $("#show_hide");

    // Make it visible off-page
    div.css({
      "display": "block"
    });

  });
$(document).click(function(e){
  $('#show_hide').fadeOut(300);
});
})(jQuery);

вы можете проверить эту ссылку, например..

проверьте http://jsfiddle.net/x5Env/

Ответ 5

Почему все, что просто использует цель css3

<a href='#login'>Login</a>


<div id='login'>
  blah blah blah
</div>


css:

#login{width:400px;height:600px;background:#fff;margin:10%
       auto;position:absolute;left:0;right:0;
      }

now we will hide the login box by putting a class on it 

<div class='lightbox' id='login'>

</div>

css:

.lightbox{display:none;}
.lightbox:target{display:block;}

thats весь код не нужно также использовать javascript

Ответ 6

Самый простой способ - захватить событие onclick документа. Вы знаете, что это событие click происходит за пределами интересующего вас элемента, а затем просто возвращает false. Я использовал этот трюк, чтобы скрыть всплывающее меню, когда вызывается клик вне события меню.

Ответ 7

$('html').click(function() { $("div").css({"display": "none"}); }); $('.option').click(function(event){ event.stopPropagation(); });

$(".search").keyup(function(){ search=$(".search"); if(search.val()!= "" ) { $("div").css({"display": "block"}); } else { $("div").css({"display": "none"}); } });

  <input type="search" class="form-control search" name="search" autocomplete="off" >

  <div>

  </div>

это поможет скрыть

Ответ 8

Попробуйте приведенное ниже решение, которое легко и даже работает рекурсивным:

$(document).mouseup(function(e) 
{
    var container = $("YOUR CONTAINER SELECTOR");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});

Ответ 9

попробуйте .blur(), и вот так:

$('#mydiv').blur(function(e) {
    $(this).fadeOut(300);
});

Надеюсь, что это поможет