回到顶部

Select2 鼠标点击空白处不消失简单测试和解决方法

时间:4年前   作者:庞顺龙   浏览:1447   [站内原创,转载请注明出处]

标签: Select2  

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人立场,如涉及侵权,请及时告知。

评论努力加载中...
暂无评论
暂无评论

手机扫码阅读

热门相关

加载中...
关于我们   联系我们   申请友链   赞助记录   站点地图
© 2014 - 2017 www.80iter.com All Rights Reserved. 京ICP备14042174号-1
本站遵循 CC BY 4.0 协议,转载请注明出处 。