jquery - 使用 jquery 在容器外单击时隐藏 div

Question

当他们点击它时，我想隐藏一个 div。为此，我有这个完美运行的代码：

var box3=$(".despcnt");
box3.mouseup（函数（）{
    返回假；
});

$(this).mouseup(function (a) {
    if(!($(a.target).parent(".despcnt").length>0)){
        box3.removeClass("dino");box3.hide()
    }
});

但我想从课堂上排除。Despcnt 具有类 despcnt 的链接，因此当在书房外单击或关闭相同的链接时...未尝试放置它不起作用。

任何想法？

HTML

<a class="desplcnt" href="#">Link</a>
<div class="despcnt">
    <ul>
        <li><a data-value="1" href="#">Title</a></li>
    </ul>
</div>

Answer 1

var $despcnt = $(".despcnt");

/* Hide the popup whereas clicking outside */
$(document).on("click", function() {
  $despcnt.hide();
});

/* Don't hide the popup whereas clicking inside */
$despcnt.on("click", function(evt) {
    evt.stopPropagation();
});

Answer 2

因此，当您单击标题时，您希望隐藏链接。但是当你点击其他任何地方时，你想隐藏标题吗？如果是这样，您可以分配Title一个mouseup事件，然后从那里隐藏链接，然后e.stopPropagation()在mouseup您使用this. 这是一个演示：http: //jsfiddle.net/pUnvR/1/

这是代码：

html

<a class="desplcnt" href="#">Link</a>
<div class="despcnt">
 <ul>
    <li><a data-value="1" href="#">Title</a></li>
 </ul>
</div>

js

var box3=$(".despcnt");
box3.mouseup(function (e) {
    $(".desplcnt").hide();
    e.stopPropagation();
});

$(this).mouseup(function (a) {
    if(!($(a.target).parent(".despcnt").length>0)){
        box3.removeClass("dino");
        box3.hide();
    }
});