Question

有问题。有这样的侧面浮动菜单： closed opened

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

如果点击最后一个div中的某个地方并使用类colorpicker colorpicker-visible

，我就无法隐藏隐藏功能mouseup

Answer 1

检查颜色选择器ID或类，并将其作为var container2 = $（＆＃34; colorpicker selector＆＃34;）;并应用与container1相同的条件

你遇到了一个问题，因为颜色选择器容器不是在侧面创建的，而是自定义＆＃34; 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');
            }
        }
    }
});

Answer 2

我打赌它是某种

$(document).mouseup(function (e){
    if ($(e.target).parents(".customize").length === 0) {
        if ($('.open_button').is('.opened')) {
            $('.open_button').trigger('click');
        }
    }
});

这是快速的肮脏小提琴： https://jsfiddle.net/kqj6g6p4/

如果点击div，jquery不会隐藏div

2 个答案: