javascript - 单击按钮时显示 div，然后在按钮外部单击时隐藏此 div

Question

HTML

<div id="selectPeriodRangePanel">
    <p>Test</p>
</div>

<button id="period_select_range_btn">Select Range</button>

JQUERY

$("#period_select_range_btn").off().on("click", function(){
    $("#selectPeriodRangePanel").toggle();
});

当我点击按钮时，selectPeriodRangePanel DIV 被打开。我想在单击外部时隐藏此 DIV。

我该怎么做？

Answer 1

试试这个

$(document).on("click", function(e){
    if($(e.target).is("#period_select_range_btn")){
      $("#selectPeriodRangePanel").show();
    }else{
        $("#selectPeriodRangePanel").hide();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selectPeriodRangePanel" style="display:none">
    <p>Test</p>
</div>

<button id="period_select_range_btn">Select Range</button>