Question

在以下示例中，如果单击该链接，则会显示div元素。

当您点击区块或鼠标的边界越过边界时，如何隐藏div？

$(document).ready(function () {
  $('a').click(function () {
    $('.bg').css({'display': 'block'});
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#">Click</a>
<div style="background: #222; display:none" class="bg">Trololo</div>

Answer 1

要在文档中除链接或div之外的任何位置单击时隐藏元素，您必须监视文档的单击事件，然后将单击的元素与链接和div进行比较，然后检查是否div是可见的。如果满足这些条件，则显示div。

要在“删除”div后隐藏元素，请使用jQuery.mouseout()。

$(document).ready(function(){
  var bg = $('.bg'), a = $('a');
  a.click(function(){
    bg.toggle();
  });
  $(document).click(function(e){
    if(!a.is(e.target) && !bg.is(e.target) && bg.is(':visible')) {
      bg.hide();
    }
  })
  bg.mouseout(function(){
    bg.hide();
  })
});

.bg {
  background: #222;                                                               color: #fff; line-height: 50px;
}
.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#">Click</a>
<div class="bg" style="display:none">Trololo</div>

Answer 2

$(document).ready(function () {
    $('a').click(function () {
        $('.bg').show();
    });
    $('.bg').mouseout(function () {
        $(this).hide();
    });
});

这隐藏了＃34; .bg＆＃34;当鼠标移出黑匣子时。无需点击。

Answer 3

看看这个小提琴 http://jsfiddle.net/k0r5bh0t/

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <div class="col-sm-12"> <a href="#" id="clickme">Click</a>

        <div style="background: #222" class="bg" id="myBg">Trololo</div>
    </div>

我添加了ID以点击我按钮和需要隐藏的div。这应该工作

Array
(
    [sales] => Array
        (
            [0] => Array
                (
                    [0] => 1
                    [1] => 6
                )

            [1] => Array
                (
                    [0] => 2
                    [1] => 8
                )

            [2] => Array
                (
                    [0] => 3
                    [1] => 25
                )

            [3] => Array
                (
                    [0] => 4
                    [1] => 34
                )

        )

)

在外面点击时隐藏div或悬停在边框

3 个答案: