Question

我尝试创建自定义下拉列表。我想让它作为默认下拉列表工作，比如当我点击div之外时隐藏所有选项。至于我试图制作它，我可以隐藏所有选项当我点击div（文档内）。但是，当我点击浏览器URL或页面标题时，下拉列表不会隐藏。

＆＃13;

$(document).ready(function (){
    $("#dvStatsDate").click(function () {
        if($("#customSelectBox").is(":visible"))
           $("#customSelectBox").hide();
        else
            $("#customSelectBox").show();
    });
    
    $("#customSelectList > li").click(function (){
       $("#statsDate").text($(this).find("span").text());
        $("#customSelectBox").hide();
    });
    
    $(document).click(function(event){
        if(!$(event.target).is("#dvStatsDate,#statsDate")){
            $("#customSelectBox").hide();
        }
    });

});

＆＃13;

.dvCustomSelect {
    width: 236px;
    display: table;
    position: relative;
}

.dvCustomSelect > div {
    display: table-cell;
}

.dvCustomSelect > div:last-child {
    width: 80%;
}

.dvCustomSelect .divSelect {
    border-radius: 3px;
    background-color: #fff;
    border: 1px solid #ccc;
}

.dvCustomSelectbox {
    position: relative;
}

.dvCustomSelectLbl > div {
    width: 100%;
    color: #555555;
    cursor: pointer;
    font-size: 14px;
    min-height: 21px;
    padding: 5px 8px;
    line-height: 20px;
    margin-bottom: 3px;
    border-radius: 3px;
    display: inline-block;
    background-color: #ffffff;
    border: 1px solid #cccccc;
}

.dvCustomSelectLbl > div i.fa {
    float: right;
}

.dvCustomSelectOptions {
    left: 0px;
    top: 100%;
    width: 204px;
    z-index: 221;
    display: none;
    margin-top: -4px;
    position: absolute;
    border-radius: 3px;
    background-color: white;
    border: 1px solid #cccccc;
}

.dvCustomSelectOptions ul {
    list-style: none;
    margin-left: 0px;
    margin-bottom: 0px;
    -webkit-padding-start: 0;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
}

.dvCustomSelectOptions ul li {
    cursor: default;
    font-size: 13px;
    padding: 2px 10px;
    background-color: white;
}

.dvCustomSelectOptions ul li:not(:last-child):hover {
    color: white;
    background-color: rgb(0, 120, 163);
}

.dvCustomSelectOptions ul li:first-child {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.dvCustomSelectOptions ul li:last-child {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='dvCustomSelect'>
  <div>Date</div>
  <div class="dvCustomSelectbox">
   <div class="dvCustomSelectLbl">
      <div id="dvStatsDate"><span id="statsDate" class="selectDate">Today</span> <i class="fa fa-sort-down"></i></div>
   </div>
   <div class="dvCustomSelectOptions" id="customSelectBox">
      <ul id="customSelectList">
         <li><span>Today</span></li>
         <li><span>Yesterday</span></li>
         <li><span>This Week</span></li>
         <li><span>Last Week</span></li>
         <li><span>This Month</span></li>
         <li><span>Last Month</span></li>
         <li><span>This Quarter</span></li>
         <li><span>Last Quarter</span></li>
         <li><span>This Year</span></li>
         <li><span>Last Year</span></li>
      </ul>
    </div>
   </div>
</div>

＆＃13;

我希望当用户点击浏览器的任何位置时，下拉将会隐藏。

Answer 1

看起来像你期望的行为，当window失去焦点时隐藏元素：

$(window).on('blur', function(){
    $("#customSelectBox").hide();
});

-DEMO-

Answer 2

我不认为你可以做任何你想要的事情。

您可以使用$(window).blur()作为A.Wolff建议，但这仅在您点击可以获得焦点的内容（例如地址栏输入）时才有效。只需单击浏览器窗口的一部分就不会使窗口模糊，因此我认为您不会通过点击要求获得此功能。

如果您放松了点击要求，则可以隐藏鼠标左键的弹出窗口。如果没有，那么A. Wolff的答案可能与使用jquery / javascript一样好。

JSFIDDLE https://jsfiddle.net/seadonk/db82jnqv/4/

$("#customSelectBox").mouseleave(function(){
   $(this).hide(); 
});

还更新了显示/隐藏逻辑以使用.toggle

$("#dvStatsDate").click(function () {
    $("#customSelectBox").toggle();
});

Answer 3

这应该可以帮助你。

match (c:Company {id: 'MY.co'})<-[:type_of]-(s:Set)<-[:job_for]-(j:Job) 
with s, j.Status as Status,count(*) as StatusCount
return s.Description, collect({Status:Status,StatusCount:StatusCount]) as StatusCounts;


   List<Object> statusMaps =  (List<Object>) row.get("StatusCounts");
   for(Object statusEntry : statusMaps ) {
     Map<String,Object> statusMap = (Map<String,Object>) statusEntry;
     String status = (String) statusMap.get("Status");
     Number count = statusMap.get("StatusCount");
    }

FIDDLE!

在div之外点击隐藏div

3 个答案:

-DEMO-