Question

我知道有很多关于这个问题的帖子，我已经尝试过很少的代码并且认为它与我的完美配合，但后来我发现当它点击同一个<div>时它才起作用（隐藏）当它点击我的#main <div>内的任何地方时，它会弹出。因此，如果我点击#main <div>中的任意位置，我的弹出窗口就会停留在那里。我已经看了一段时间，看不出原因。

有人可以请你关注一下吗？

编辑：这些是我的代码。

我的html，我有select选项和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>

这就是js中的内容

var colorHolder = null; //used to store the location where color is picked

/* Function checks which side's div is clicked and pop put the colorSelectBox with the position of the div popping out */
function colorFieldPicker(onClickSide,side){
    onClickSide.on('click', function(event){
        //store the class of the colorHolder to a global variable
        colorHolder = $(this).attr('class');
        var yVal = (event.clientY) + "px";
        var xVal = (event.clientX) + "px";
        $('.colorSelectBox').css({"left": xVal, "top": yVal}).toggle();
        //empty the field where it says 'Click to choose colors'
        $(this).closest('div').find('.gradient').children().empty();
        //var visible = $('.colorSelectBox').hasClass('visible');
        //if(visible){
        //    $('.colorSelectBox').hide();
        //    $('.colorSelectBox').removeClass('visible');
        //}else{
        //    $('.colorSelectBox').show();
        //    $('.colorSelectBox').addClass('visible');
        //}
        colorPickerOnClick(side);

    });
}
/* Function which then determine what color is clicked and return the color to the div selected as the div's background color */
function colorPickerOnClick(side){
    //semi colors on click
    $('div.azRed')
        .add('div.azYellow')
        .on('click', function(){
        var colorAttr = $(this).attr('value');
        var nameAttr = $(this).attr('name');
        var splitClass = colorHolder.split(" ");
        side.closest('div').find('.'+splitClass[0] + '.'+splitClass[1])
            .css({"background": colorAttr, "border": "none"})
            .attr({"value": colorAttr, "data-semi": true, "data-coated": false, "name": nameAttr});
        $('.colorSelectBox').css({"display": "none"});
    });

    //coated color on click
    $('div.white').on('click', function(){
        var colorAttr = $(this).attr('value');
        var nameAttr = $(this).attr('name');
        var splitClass = colorHolder.split(" ");
        side.closest('div').find('.'+splitClass[0] + '.'+splitClass[1])
            .css({"background": colorAttr, "border": "1px solid lightgrey"})
            .attr({"value": colorAttr, "data-semi": false, "data-coated": true, "name": nameAttr});
        $('.colorSelectBox').css({"display": "none"});
    });
}

以上是原始代码，我在网上搜索并发现了这个，这也是迭戈提供的，

/*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使其弹出框，则只会将位置更改为我的鼠标位置。我尝试添加/删除类，因为它现在在我的代码中被注释掉，可以看到上面，它工作但仍然有问题，因为当我点击框外的任何地方时，框的类将不会删除，所以我添加了删除上面的代码类，如果单击框外的任何地方，将删除该类。但这不起作用。

提前感谢您的帮助。

Answer 1

我有点幸运，我想我找到了用于隐藏彩盒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，它总会返回那个函数，永远不会隐藏。我不知道你在这里尝试了什么。

Answer 2

使用以下代码替换{6}行的$(document).click函数：

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

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

请检查此问题：Use jQuery to hide a DIV when the user clicks outside of it

单击其他任何地方时弹出div hide（） - jQuery

2 个答案: