自定義下拉滑動如果我交互jquery datepicker

這裏的問題是，具有filter_sub（自定義菜單下拉類）類的div向上滑動（當點擊此元素及其後代以外的任何地方時隱藏的東西）何時我交互進入jQuery UI日期選擇器。自定義下拉滑動如果我交互jquery datepicker

任何想法，線索，幫助，建議，建議來解決我的問題？

我想自定義菜單下拉菜單不會滑動，當我進入互動（即有一類filter_sub的一個）jquery ui date picker或將銳化等是jquery ui datepicker和自定義下拉菜單中，當點擊任意位置則jQuery UI的日期選取器將被隱藏以及自定義下拉菜單將向上滑動（隱藏）。

$(document).ready(function(){ 
 
    $(".thehide").hide(); 
 
    $(".datepicker").datepicker({ 
 
      dateFormat: "yy-mm-dd" 
 
     }); 
 
     //when authorized person clicks on the attendance menu 
 
     $(".filter_pages").unbind().click(function(e){ 
 
       $(this).next(".filter_sub").slideToggle(); 
 
       e.preventDefault(); 
 
      }); 
 

 

 
     $(document).mouseup(function(e) 
 
      { 
 
       var container = $(".filter_sub"); 
 
       var calendar = $(".ui-datepicker"); 
 

 
       if (!container.is(e.target) // if the target of the click isn't the container... 
 
&& container.has(e.target).length === 0) // ... nor a descendant of the container 
 
       { 
 

 
         container.slideUp(); 
 

 
       } 
 
      }); 
 
    
 
});

.filter .filter_has_sub{ 
 
    padding: 0px; 
 
    margin: 0px; 
 
    float: left; 
 
    margin-left: 7px; 
 
} 
 
.filter_pages{ 
 
    display: table; 
 
    font: normal 12px 'mpregular', san-serif; 
 
    padding: 7px; 
 
    color: #7e7e7e; 
 
    margin-top: 4px; 
 
} 
 
.filter_pages span, .filter_sub a span{ 
 
    float: left; 
 
    display: block; 
 
} 
 
.filter_pages span:first-child, .filter_sub a span:first-child{ 
 
    margin-right: 6px; 
 
} 
 
.filter_pages span:last-child{ 
 
    font-size: 8px; 
 
    padding-top: 3px; 
 
} 
 
.filter_has_sub:first-child .filter_sub{ 
 
    margin-left: -100px; 
 
    width: 170px; 
 
} 
 
.filter_has_sub:first-child .filter_sub .filter_datepicker{ 
 
    border: 1px solid #ccc; 
 
    display: table; 
 
    margin: 5px auto; 
 
} 
 
.filter_has_sub:first-child .filter_sub .filter_datepicker span{ 
 
    display: block; 
 
    margin: 0px 5px 0px 0px; 
 
    float: left; 
 
    font-size: 20px; 
 
    padding: 5px 0px 0px 5px; 
 
    color: #7e7e7e; 
 
} 
 
.filter_has_sub:first-child .filter_sub .datepicker{ 
 
    padding: 5px; 
 
    border: none; 
 
    margin: 0px; 
 
    display: block; 
 
    float: left; 
 
    width: 120px; 
 
} 
 

 
.filter_sub{ 
 
    background: #fff; 
 
    position: absolute; 
 
    z-index: 99999999; 
 
    width: 100px; 
 
    margin-left: -30px; 
 
    padding: 10px 5px; 
 
    margin-top: 5px; 
 
    
 
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); 
 
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); 
 
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15); 
 
} 
 
.filter_sub a{ 
 
    clear: both; 
 
    float: none; 
 
    display: block; 
 
    padding: 5px 10px; 
 
    font: normal 14px 'mplight', sans-serif; 
 
    color: #555; 
 
    text-transform: uppercase; 
 
} 
 
.filter_sub a:hover{ 
 
    color: #555; 
 
} 
 
.thehide{dsiplay: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<div class="filter_has_sub extend data_filter" style="display: table; margin: 0px auto;"> 
 
       <a href="#" class="btn btn-default filter_pages"><span>Filter Data</span><span class="ion-chevron-down"></span></a> 
 
        <div class="filter_sub thehide" id="pagesfilter"> 
 
          <div class="extend clear" style="height: 5px;"></div> 
 
          <div class="filter_datepicker extend clear"> 
 
           <span class="ion-calendar"></span><input class="form-control datepicker extend" name="from_what_date" placeholder="From what date" required/> 
 
          </div> 
 
          <div class="filter_datepicker extend clear"> 
 
           <span class="ion-calendar"></span><input class="form-control datepicker extend" name="to_what_date" placeholder="To what date" required/> 
 
          </div> 
 
          <button class="btn btn-default center display_table" id="date_filter_button">Go</button> 
 
        </div> 
 
       </div>

來源

2015-07-04 Juliver Galleto

我認爲你是幾乎沒有。這裏是你可以做什麼：

在你if子句中mouseup功能，添加另一個條件：calendar.has(e.target).length===0。它執行同樣的事情其他類似狀況，即確保了當前target不是ui-datepicker 元素的後裔。
另外，我注意到，您的slideToggle內click事件和你slideUp您mouseup事件中被陸續執行一個，如果你點擊filter_has_sub元素隱藏內部元素。簡單的辦法是滑動既slideToggle和slideUp電話前加一個stop(true)權。

JS：

$(document).ready(function() { 
    $(".thehide").hide(); 
    $(".datepicker").datepicker({dateFormat: "yy-mm-dd"}); 
    $(".filter_pages").unbind().click(function (e) { 
     $(this).next(".filter_sub").stop(true).slideToggle(); 
     e.preventDefault(); 
    }); 
    $(document).mouseup(function (e) { 
     var container = $(".filter_sub"); 
     var calendar = $(".ui-datepicker"); 
     if (!container.is(e.target) && calendar.has(e.target).length === 0 && container.has(e.target).length === 0) { 
      container.stop(true).slideUp(); 
     } 
    }); 
});

希望這有助於。

來源

2015-07-04 08:41:28

謝謝你，作品像魅力，反正什麼停止（真）做什麼？ –

[停止選定元素上的所有正在運行的動畫]（https://api.jquery.com/stop/），同時可選[刪除排隊動畫和/或跳轉到動畫結尾]（https：//api.jquery。 COM /停止/＃停止clearQueue-jumpToEnd）。 –

該菜單已啓用toggle，所以沒問題。所以，如果所有你需要做的是檢查是，如果nodeName是HTML如果目標外用戶點擊讓它成爲UI calender或幻燈片的input box

所以，你不必檢查container.is(e.target)

這是你如何能做到這==>(event.target.nodeName === 'HTML')

退房的UPDATED FIDDLE

欲瞭解更多信息請看進入jQuery Docs- event.target

來源

2015-07-04 08:56:56 Abhinav

自定義下拉滑動如果我交互jquery datepicker

回答

相關問題