点击隐藏显示和点击body空白处隐藏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #unitlei_rules{
            width: 30%;
            height: 30px;
            border-radius: 3px;
            border: 1px solid #CCCCCC;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <textarea id="unitlei_rules" readonly>{$arr1['unitlei_rule']}</textarea>
    <div style="position: relative;">
         <div hidden id="unitlei_rules_hide" style="position: absolute;height: 200px;overflow: hidden;overflow-y: scroll;width: 30%;left: 105px;top: 0;background-color: white;">
               <div style="margin: 1% 0;padding-left: 5%;">
                    <input type="checkbox" value="123" class="unitlei_rules_children">123
               </div>
         </div>
    </div>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js" type="text/javascript></script>
<script type="text/javascript">
     hide_show_element("#unitlei_rules","#unitlei_rules_hide");  
</script>

<script>
/**
 * @description: 点击元素显示或隐藏指定内容，点击其他位置隐藏指定内容
 * @param click_selector 点击的元素的选择器 "#unitlei_rules"
 * @param show_selector  要显示的内容的选择器 "#unitlei_rules_hide"
 * @return: 
 */
function hide_show_element(click_selector,show_selector)
{
    $(document).on('click',click_selector,function(){
        if ($(show_selector).is(":hidden")) {
            $(show_selector).show();
        } else {
            $(show_selector).hide();
        }
        event.stopPropagation();
    })
 
    $("html").on("click",function(e){
        if ($(e.target).closest(show_selector).length <= 0) {
           $(show_selector).hide();
        }
    })
}
</script>
</body>

</html>
文章来源于：https://www.cnblogs.com/huanghuali/p/6831472.html
点击隐藏显示和点击body空白处隐藏

CATALOG

标签
