javascript - 单击其他任何地方时弹出 div hide() - jQuery

Question

我知道有很多关于这个问题的帖子，我尝试了一些代码并认为它​​与我的代码完美配合，但后来我发现它只有在我点击相同的 <div> 时才有效(隐藏)这让它流行起来，当我点击不在我的 #main 内的任何地方时也是如此。 <div> .因此，如果我单击 #main 中的任意位置<div> ，我的弹出窗口将停留在那里。我已经看了一段时间，但不明白为什么。

谁能帮我看看？

编辑: 这些是我的代码。

我的 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>

这是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"});
    });
}

上面是原代码，我在网上搜索了一下，发现这个，也是Diego提供的，

/*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

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