Question

我有一个隐藏的div，点击链接文本就会打开。我需要隐藏div并在用户点击正文上任意位置active之外时从链接文本中删除div类。

我使用了body onclick来隐藏div但是它也隐藏了div上的div。我不想仅在单击时关闭div，而不是在div单击上关闭div。如何停止div点击操作？

这是我尝试过的事情

$('.link').click(function(e){
e.stopPropagation();
    $(this).toggleClass('active');
    $(".box").slideToggle();
});

$('body').click(function(e) {
    $(".box").hide();
        $(".link").removeClass('active');
});

DEMO

Answer 1

尝试使用 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <style>.active { background: red; color:#FFF; }</style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="inputs"></div> <input type="text" id="rows" placeholder="No. of Rows" /> jQuery。

event.target

event.target

$('body').click(function(event) {
  if (!$('.box').is(event.target) && $('.box').has(event.target).length === 0) {
    $('.box').slideUp();
    $('.link').removeClass('active');
  }
});
$('.link').click(function(event) {
  event.stopPropagation()
  $(this).toggleClass('active');
  $(".box").slideToggle();
});

.header {
  background: #fff;
  padding: 20px
}

body {
  height: 600px;
  font: 13px Verdana;
}

.link_div {
  position: relative
}

.link {
  display: inline-block;
  outline: none;
  padding: 10px;
  color: black;
  background: #e1e1e1;
  box-shadow: -1px -3px 3px 0px rgba(109, 109, 109, 0.2);
}

.box {
  display: none;
  background: #8bdeff;
  padding: 30px;
  position: absolute;
  top: 40px;
  left: 0
}

.active {
  background: #8bdeff
}

Answer 2

我建议您这样做：

$('.link').click(function(e){
    e.stopPropagation();
    $(this).toggleClass('active');
    $(".box").slideToggle();
});

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

    // Short-circuit if box is clicked OR
    // link is not active
    if ($(target).is('.box')) return;
    if (!$(".link").hasClass('active')) return

    $(".box").slideToggle();
    $(".link").removeClass('active');
});

有些注意事项：

e是单击时传递给eventListener的事件，它有一个可以检查的目标。
当盒子被点击目标或链接已经激活时，我正在短路
我正在使用slideToggle而不是hide，因为它更好，并且因为这只会在链接处于活动状态时触发，所以您不必担心在div外部单击并且在链接切换/打开时闭合。

希望有所帮助！

JSFiddle：https://jsfiddle.net/Lm85m7nb/

Answer 3

您可以检查点击的元素是否为类.box，如果是，则不执行任何操作。

$('.link, .box').click(function(e) {    // Added .box to the click-function
  if ($(this).attr("class") == "box") { // check if the clicked element is .box
    return false;                       // do nothing like return false
  }
  e.stopPropagation();
  $(this).toggleClass('active');
  $(".box").slideToggle();
});

$('body').click(function(e) {
  $(".box").hide();
  $(".link").removeClass('active');
});

.header {
  background: #fff;
  padding: 20px
}

.link_div {
  position: relative
}

.link {
  display: inline-block;
  outline: none;
  padding: 10px;
  color: black;
  background: #e1e1e1;
  box-shadow: -1px -3px 3px 0px rgba(109, 109, 109, 0.2);
}

.box {
  display: none;
  background: #8bdeff;
  padding: 30px;
  position: absolute;
  top: 40px;
  left: 0
}

.active {
  background: #8bdeff
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
  <div class="link_div">
    <a href="#" class="link">Open box</a>
    <div class="box">
      I am a box
    </div>
  </div>
</div>

Answer 4

您好您可以使用此代码添加文档点击事件，以便点击在外面关闭

$('.link').click(function(e){
  e.stopPropagation();
  e.preventDefault();
    $(this).toggleClass('active');
    $(".box").slideToggle();
});

$(document).click(function(e) {
    $(".box").hide();
        $(".link").removeClass('active');
})

点击外面时隐藏div

4 个答案: