Javascript 单击其他位置时弹出div hide（）-jQuery

我知道有很多关于这个问题的帖子，我也尝试过一些代码，认为它与我的完美结合，但后来我发现只有当我点击使它弹出的同一个

时，以及当我点击我的

\main

之外的任何地方时，它才起作用（隐藏）。因此，如果我单击我的
#main
中的任何位置，我的弹出窗口就会停留在那里。我已经看了一段时间，不知道为什么

谁能帮我看一下吗

编辑：
这些是我的密码

我的html，其中有选择选项和colorSelectBox

<div class="color-side-a">
    <p class="sideABCD-header">Side A</p>
    <div class="dimension-width">
        <p class="dimension-WHC">Colors</p>
        <select name="number-of-colors" class="number-of-colors color-a">
            <option value="" group="1">Select A Number</option>
            <option value="1" group="1">1</option>
            <option value="2" group="1">2</option>
            <option value="3" group="1">3</option>
        </select>
        <div class="number-of-color-field">
            <div name="color1" class="sideA color1" data-semi="false"  data-coated="false"></div>
            <div name="color2" class="sideA color2" data-semi="false"  data-coated="false"></div>
            <div name="color3" class="sideA color3" data-semi="false"  data-coated="false"></div>
        </div>
    </div>
</div><!-- end color side A -->


<div class="colorSelectBox">
    <div>14 Guage Semi-Transparent</div>
    <div>
        <div class="azRed" value="#DD2A13" name="Aztec Red"></div>
        <div class="azYellow" value="#E5BC0A" name="Aztec Yellow"></div>
    </div>
    <div class="clear"></div>
    <div>18 oz Industrial Stength Viyl Coated</div>
    <div>
        <div class="yellow" value="yellow" name="yellow"></div>
        <div class="blue" value="blue" name="blue"></div>
        <div class="black" value="black" name="black"></div>
        <div class="brown" value="brown" name="brown"></div>
        <div class="grey" value="grey" name="grey"></div>
        <div class="green" value="green" name="green"></div>
        <div class="white" value="white" name="white"></div>
        <div class="orange" value="orange" name="orange"></div>
    </div>

上面是原始代码，我在网上搜索找到了，这也是迭戈提供的

/*Makes the colorSelect hide when mouse clicked other places*/
$(document).mouseup(function (e) {
    var container = $(".colorSelectBox");

    if (!container.is(e.target) && container.has(e.target).length === 0){
        container.hide();
    }
});

上面的代码运行得很好，但我真正想要的是当我单击某个
div
时，框弹出，当我再次单击同一
div
或框外的任何位置时，框将消失。上面的代码只有在我单击框外的任何位置时才能正常工作，但如果我单击使其弹出的
div
，框的位置将仅更改为我的鼠标位置。我尝试添加/删除类，因为它现在在我的代码中被注释掉了，可以在上面看到，它可以工作，但仍然存在问题，因为当我单击框外的任何位置时，框内的类将不会删除，因此我将删除类添加到上面的代码中，如果单击框外的任何位置，类将被删除。但这不起作用

提前感谢您的帮助。
我有点幸运，我想我找到了隐藏colorbox div的jQuery代码

    $(document).click(function (e) {
        if ($(e.target).closest('.colorSelectBox').length > 0 || $(e.target).closest('div').length > 0) return;
        $('.colorSelectBox').hide();
    });

它不会隐藏它的原因是因为第二个条件：

$(e.target).closest('div').length > 0

它基本上说，如果单击的元素是div或div的子元素，那么不要隐藏它。由于到处都有div，它将始终返回该函数，并且从不隐藏。我不知道您在这里尝试了什么。
替换
$（文档）。单击第690行的
函数，使用以下内容：

$(document).mouseup(function (e) {
  var container = $(".colorSelectBox");

  if (!container.is(e.target) && container.has(e.target).length === 0)
  {
      container.hide();
  }
});

检查此问题：
我无法查看页面，因为我在平板电脑上，但我非常确定此“div”是一个
，里面有一些
。你真的需要它成为一个自定义div吗？我在页面的“查看源代码”中意识到，每个js函数都标有“function to”的描述。您可能需要检查所有这些实例，以找到真正符合您所需的代码。@Lauromine
选择一个数字
是一个
，根据值选择
的#将弹出。我实际上也尝试过这个方法，反应相同。是的，这就是它的工作原理，你尝试过这个解决方案吗？是的，这就是我的意思，这实际上是我找到并尝试过的第一个编码，但当在任何其他元素中单击时也不会隐藏。因此，搜索了很多其他方法，但仍然无法理解这就是我发布此线程的原因：（尝试一下，我100%确定这是可行的，但您必须替换第717行的代码整个$（文档）。单击函数您必须删除的函数位于第717行，此：$（文档）。单击（函数（e）{if（$（e.target）。最近（'.colorSelectBox'）.length>0 | |$（e.target）.closest（'div'）.length>0）返回；$（'.colorSelectBox'）.hide（）；}）；所需的是在弹出div后，选择弹出div中的一种颜色，然后div将隐藏，或者单击弹出div以外的任何位置也将隐藏它。您不需要第二个条件。只需删除它即可。如果单击
.colorSelectBox上的任何位置，第一个条件就可以了
它不会隐藏
div
，其他所有内容都会隐藏。当选择任何选项时，您可以使用另一个功能隐藏
.colorSelectBox
。
$(document).mouseup(function (e) {
  var container = $(".colorSelectBox");

  if (!container.is(e.target) && container.has(e.target).length === 0)
  {
      container.hide();
  }
});