Question

我有一个父类div，类是一个“非常大的div”，它嵌套了另一个“container-div”，它反过来又嵌套了另一个孩子div。这个非常大的div就像一个按钮，就在它之后的div就是一个容器，当我点击这个非常大的div时会出现。

<div class="very-big">
  <div class="container">
   <!-- Some other more nested divs that has anchors and buttons  -->
   <div class="friend-request">
     <div class="button-div">
     <button class="accept">Trigger</button>
      <button class="refuse">Trigger</button>
     </div>
     </div>

  </div>
 </div>

问题首先是两件事： css问题尚未解决

我为“very-big-div”分配了一个悬停伪类，每当我悬停“container-div”时，悬停属性（background-color）就会应用于“very-big-div”。这不是我打算做的，我只想悬停“非常大”的div来悬停申请。

.very-big{
 background-color:green;
  }

第二个问题是：我有一个处理容器的jquery，因此它被“非常大的div”打开/关闭

$(document).ready(function(){
$("#container-div").hide(); 
$("#very-big-div").click(function(){
$("#container-div").toggle();
 });
 });

每当我点击容器内的一个锚点或一个按钮时，容器都有锚点和按钮标签，它被切换为自动关闭，这不是我想要的，我想要的只是当我只按“非常” -big-div“切换激活。

Answer 1

@Jhecht给出了答案，我刚刚继承了他的答案。

您可以使用target停止传播触发切换的子元素点击，并将.very-big容器的所有子元素排除在：

$(".very-big").click(function(e) {
    var target = $(e.target);
    if (!target.is('.very-big *')) {
      $(".container").toggle();
    }
});

代码段：

$(document).ready(function() {
  $(".container").hide();
  $(".very-big").click(function(e) {
    var target = $(e.target);
    if (!target.is('.very-big *')) {
      $(".container").toggle();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="very-big">
  Other Text
  <div class="container">
    This is text to fill stuff out so I can click on it.
  </div>
</div>

Answer 2

这对我有用，但我不确定这是否是你需要的。

请添加完全重新创建您所看到的错误所需的最低HTML，CSS和Javascript。

＆＃13;

$(document).ready(function() {
  $(".container").hide();
  $(".very-big").click(function(e) {
    console.log(e);
    var current = $(e.toElement);
    if (current.is('.container')) {
      e.stopPropagation();
      return false;
    }
    $('.container').toggle();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="very-big">
  Other Text
  <div class="container">
    This is text to fill stuff out so I can click on it.
  </div>
</div>

＆＃13;

子div影响css中的父div并触发jquery方法

2 个答案:

代码段：