模仿select弹框

2019年8月25日 130次阅读 来源: 无名小子

模仿select弹框

  • 功用点：

    1. 点击text显现下拉框，再次点击下拉框下拉框消逝

    1. 点击下拉框将值赋值给text

    1. 点击下拉框以外地区，下拉框消逝

html


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

<head>
    <meta charset="utf-8">
    <title>模仿select弹框</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <!--模仿下拉-->
    <div class="model-select-box" style="width:180px; z-index:22;">
        <div id="boxsex" class="model-select-text" data-value="">--请挑选--</div>
        <ul class="model-select-option">
            <li data-option="">--请挑选--</li>
            <li data-option="1">男</li>
            <li data-option="0">女</li>
        </ul>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="index.js"></script>
</body>

</html>

css:


/*
* @Author: baby
* @Date:   2017-07-06 12:37:56
* @Last Modified by:   baby
* @Last Modified time: 2017-07-06 14:38:51
*/

.model-select-box {
    position: relative;
    width: 200px;
    height: 30px;
    line-height: 30px;
    background-color: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    text-indent: 5px;
}

.model-select-box .model-select-text {
    position: relative;
    width: 100%;
    height: 28px;
    // height: 30px;
    // line-height: 30px;
    color: #666;
    text-indent: 10px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}

.model-select-box .model-select-text:after {
    position: absolute;
    top: 10px;
    right: 10px;
    content: '';
    width: 0;
    height: 0;
    border-width: 10px 8px 0;
    border-style: solid;
    border-color: #666 transparent transparent;
}

.model-select-box .model-select-option {
    position: absolute;
    top: 30px;
    left: -1px;
    display: none;
    list-style: none;
    border: 1px solid #e4e4e4;
    border-top: none;
    padding: 0;
    margin: 0;
    width: 100%;
    z-index: 99;
    background-color: #fff;
}

.model-select-box .model-select-option li {
    height: 28px;
    line-height: 28px;
    color: #333;
    font-size: 14px;
    margin: 0;
    padding: 0;
    // text-indent: 10px;
    cursor: pointer;
}

.model-select-box .model-select-option li:hover {
    background-color: #f3f3f3;
}

.model-select-box .model-select-option li.seleced {
    background-color: #f3f3f3;
}

js:


/*
 * @Author: baby
 * @Date:   2017-07-06 12:38:11
 * @Last Modified by:   baby
 * @Last Modified time: 2017-07-06 14:24:53
 * 模仿select弹框
 * 功用点：
 * 1. 点击text显现下拉框，再次点击下拉框下拉框消逝
 * 2. 点击下拉框将值赋值给text
 * 3. 点击下拉框以外地区，下拉框消逝
 *
 */

'use strict';

$(function() {
    selectModel();
});

/**
 * 模仿网页中一切下拉列表select
 * @return {[type]} [description]
 */
function selectModel() {
    var $box = $('div.model-select-box');
    var $option = $('ul.model-select-option', $box);
    var $txt = $('div.model-select-text', $box);
    var speed = 10;
    /**
     * 单击某个下拉列表时，显现当前下拉列表的下拉列表框
     * 并隐蔽页面中其他下拉列表
     */
    $txt.on('click', function() {
        var $self = $(this);
        $option.not($self).siblings('ul.model-select-option').slideUp(speed, function() {
            init($self);
        });
        $self.siblings('ul.model-select-option').slideToggle(speed, function() {
            init($self);
        });
        return false;
    });

    // 点击挑选，封闭其他下拉
    /**
     * 为每一个下拉列表框中的选项设置默许选中标识 data-selected
     * 点击下拉列表框中的选项时，将选项的 data-option 属性的属性值赋给下拉列表的 data-value 属性，并转变默许选中标识 data-selected
     * 为选项增加 mouseover 事宜
     */
    $option.find('li').each(function(index, element) {
        var $self = $(this);
        if ($self.hasClass('selected')) {
            $self.addClass('data-selected');
        }
    }).mousedown(function() {
        $(this).parent().siblings('div.model-select-text').text($(this).text()).attr('data-value', $(this).attr('data-option'));

        $option.slideUp(speed, function() {
            init($(this));
        });
        $(this).addClass('selected data-selected').siblings('li').removeClass('selected data-selected');
        return false;
    }).mouseover(function() {
        $(this).addClass('selected').siblings('li').removeClass('selected');
    });

    // 点击文档隐蔽一切下拉
    $(document).on('click', function() {
        var $self = $(this);
        $option.slideUp(speed, function() {
            init($self);
        })
    });

    /**
     * 初始化默许挑选
     */
    function init(obj) {
        obj.find('li.data-selected').addClass('selected').siblings('li').removeClass('selected');
    }
}
    原文作者：无名小子
    原文地址: https://segmentfault.com/a/1190000010075550
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞