javascript - 如果单击 div，jquery 不会隐藏 div

Question

有问题。有像这样的侧面 float 菜单:

<div class="customize" style="display: block; margin-right: 0px;">
<span class="open_button opened"><i class="fa fa-paint-brush"></i></span>
<div class="customize_block">
    <div class="input_square">
        <h5>Font Family</h5>
        <select id="font" class="form-control">
            <option value="arial">Arial</option>
            <option value="Halvetica">Halvetica</option>
            <option value="Times new roman">Times new roman</option>
        </select>
    </div>
    <div class="input_square">
        <h5>Select font color</h5>
        <input type="text" id="pick1"  class="pick_color" placeholder="Select" value="#fff">
        <span id="pick_box1" class="color_box" style="background-color:#fff"></span>
    </div>
    <div class="input_square">
        <h5>Inner background color</h5>
        <input type="text" id="pick2"  class="pick_color" placeholder="Select" value="#fff">
        <span id="pick_box2" class="color_box" style="background-color: #fff"></span>
    </div>
    <div class="input_square">
        <h5>Outer background color</h5>
        <input type="text" id="pick3"  class="pick_color" placeholder="Select" value="#fff" >
        <span id="pick_box3" class="color_box" style="background-color: #fff"></span>
    </div>
</div>

javascript代码:

$(".open_button").click(function() {
    if ($(this).hasClass("opened")) {
        $(".customize").animate({
            marginRight: '-=431px'
       }, 1000);
        $(this).removeClass("opened");
    } else {
         $(".customize").animate({
            marginRight: '+=431px'
       }, 1000); 
        $(this).addClass("opened");
    }

});

还有一些额外的 js 代码，如果在该 div 外部单击以将其隐藏。

$(document).mouseup(function (e){
        var container1 = $(".customize");
        if(click == 0){
            if (!container1.is(e.target) && container1.has(e.target).length === 0){ // if the target of the click isn't the container...
                if($('.open_button').hasClass('opened')){
                    $('.open_button').trigger('click');
                }
            }
        }
    });

问题是在那个输入中我使用的是 jquery colorpicker 插件，它有额外的 div，比如:

<div class="colorpicker dropdown-menu colorpicker-visible"></div>

如果在最后一个带有 colorpicker colorpicker-visible 类的 div 中的某处单击，我无法停止隐藏函数 mouseup

Answer 1

检查颜色选择器 id 或类并将其作为 var container2 = $("colorpicker selector");并应用与 container1 相同的条件

您遇到问题是因为颜色选择器容器不是在“自定义”div 中创建的。使用脚本以绝对位置创建的颜色选择器容器。

  $(document).mouseup(function (e){
    var container1 = $(".customize");
    var container2 = $("color picker id or class");
    if(click == 0){
        if ((!container1.is(e.target) && container1.has(e.target).length === 0) && (!container2.is(e.target) && container2.has(e.target).length === 0)){ // if the target of the click isn't the container...
            if($('.open_button').hasClass('opened')){
                $('.open_button').trigger('click');
            }
        }
    }
});