jquery не спрятать div, если щелкнуть div

Question

Возникли проблемы. есть сторона плавали меню, как это:

<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 код, что если нажмите OutSite этот 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 плагин Wich, что подаваемого в я использую есть дополнительный DIV, как:

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

и я не могу остановить функцию mouseup скрываюсь, если щелкнуть где-то в последнем DIV с классом Colorpicker ColorPicker-видимой

Answer 1

проверить, что селектор цвета идентификатор или класс и принять его как вар container2 = $ («селектор Colorpicker»); и примените те же условия, что и контейнер1

Вы столкнулись с проблемой, поскольку контейнер выбора цвета не создан в боковом «настраиваемом» 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/