使用 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() 以绕过在使用this 时附加到窗口的全局mouseup。这是一个演示：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();
    }
});