Question

我知道很多时候会问这个问题，但我的问题在某种程度上是不同的。

对于那些有同样问题的人来说，解决方案是https://jsfiddle.net/8oqvoffc/4/而不是MarcelD

所以，如果我在主div外面点击它会隐藏第二个div。但是，如果我在某些元素上点击主div，它就不应该隐藏。像其他儿童DIV或P一样。它只应在其边界外点击时生效。我该改变什么？

＆＃13;

$(document).click(function(e) {
  if (e.target.id != 'slide-out') {
    $('.totals').hide();
  }
});

＆＃13;

.div1 {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background-color: #ccc;
}

.totals {
  border-top: 1px solid #ddd !important;
  position: fixed !important;
  bottom: 0px !important;
  background: #000 !important;
  right: 0px !important;
  width: 300px !important;
  height: 190px !important;
  padding-top: 20px !important;
  z-index: 9999999999999999999999999 !important;
  display: ;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide-out" class="div1">
  <div class="div1_one">
    sada
  </div>
  <p>
    hello world!
  </p>
</div>

<div class="totals">

</div>

＆＃13;

Answer 1

您必须检查像@Carsten指出的父母一样。但他的解决方案仅适用于一个级别......

这里有一个更新的小提琴+并不重要你的元素有多深 - ＆gt;只要他们有父母＃slide-out就不会隐藏你的.totals

＆＃13;

$(document).click(function(e) {   
 if(e.target.id != 'slide-out' && $(e.target).parents('#slide-out').length === 0) {
        $('.totals').hide();   
    } 
});

＆＃13;

.div1 {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background-color: #ccc;
}

.totals {
   border-top: 1px solid #ddd !important;
   position:fixed !important;
   bottom: 0px !important;
   background: #000 !important;
   right: 0px !important;
   width: 300px !important;
   height: 190px !important;
   padding-top: 20px !important;
   z-index: 9999999999999999999999999 !important;
   display: ;
    }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="slide-out" class="div1">
  <div class="div1_one">
  sada
  </div>
  <p>
  hello world!
  </p>
</div>

<div class="totals">

</div>

＆＃13;

Cheerio：）

Answer 2

您可以使用stopPropagation()函数停止点击事件从子元素触发到父元素

＆＃13;

$(document).click(function(e) {
  if (e.target.id != 'slide-out') {
    $('.totals').hide();
  }
});

$('.totals').click(function(e) {
  e.stopPropagation();
})

＆＃13;

.div1 {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background-color: #ccc;
}

.totals {
  border-top: 1px solid #ddd !important;
  position: fixed !important;
  bottom: 0px !important;
  background: #000 !important;
  right: 0px !important;
  width: 300px !important;
  height: 190px !important;
  padding-top: 20px !important;
  z-index: 9999999999999999999999999 !important;
  display: ;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slide-out" class="div1">
  <div class="div1_one">
    sada
  </div>
  <p>
    hello world!
  </p>
</div>

<div class="totals">
</div>

＆＃13;

Answer 3

我知道这已经解决了，但最快和最好的解决方案如下。我认为应该使用这个代码。不希望你接受这个答案，只是想帮助你。

$(document).ready(function (e) {
    $('body').not('.totals').click(function(e) {
        $('.totals').hide();
    })
});

当用户点击另一个div之外时，jQuery隐藏div

3 个答案: