Select2 滑鼠點選空白處不消失簡單測試和解決方法

龐順龍發表於2019-05-11

Select2 滑鼠點選空白處不消失簡單測試和解決方法  

demo見附件

1、參照官網下載 http://select2.github.io/

2、demo結構如下

3、按照官網demo 


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="jquery.min.1.10.2.js" type="text/javascript"></script>
    <script src="bootstrap.js" type="text/javascript"></script>
    <link href="bootstrap.css" rel="stylesheet" type="text/css" />
    <script src="select2.full.js" type="text/javascript"></script>
    <link href="select2.css" rel="stylesheet" type="text/css" />
</head>
<body>
   
        <select class="js-basic-multiple js-states form-control" multiple="multiple" id="selTagText"
                title="選擇">
            <optgroup label="全部">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </optgroup>
        </select>
        <script type="text/javascript" class="js-code-placeholder">
            $("#selTagText").select2({
                placeholder: "+選擇",
                allowClear: true,
                maximumSelectionLength: 5
            });
        </script>  
</body>
</html>

4、測試執行，發現滑鼠點選頁面空白區域下拉框不消失？

5、簡單測試發現，個人感覺是點選區域問題，除錯發現點選所屬的父級容器，所以簡單處理就是可以在頁面加大高度，其實就是所在頁面的body第一層容器高度 

<div class="container" style=" height:1000px;width:100%">
這樣select2所屬的父級容器高度就足夠了，點選下面空白的地方就會自動隱藏下拉框咯。

由龐順龍最後編輯於：4年前

內容均為作者獨立觀點，不代表八零IT人立場，如涉及侵權，請及時告知。

相關文章