집 >웹 프론트엔드 >JS 튜토리얼 >div는 기본 선택 효과 예시 공유를 시뮬레이션합니다.

div는 기본 선택 효과 예시 공유를 시뮬레이션합니다.

小云云원래의: 2018-03-15 16:19:491793검색

개발 과정에서 시스템의 기본 선택이 다소 보기 흉하거나 때로는 UI 디자인의 스타일 요구 사항을 충족하지 않는 경우가 종종 있습니다. 따라서 효과를 얻고 서버에 데이터를 전송하려면 자체 시뮬레이션을 작성해야 합니다. . 이 기사에서는 모든 사람에게 도움이 되기를 바라며 주로 div 시뮬레이션 기본 선택 효과의 예를 공유합니다.

효과는 다음과 같습니다.

코드는 다음과 같습니다.

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/cs.css" disabled="true">
    <style>
        body{padding:30px;font-family: "微软雅黑";}
        li{list-style: none;}
        *{padding:0;margin:0;}
        #selector{position:relative;height:30px;width:210px;font-size:13px;line-height:30px;text-align:left;user-select:none;}
        #selector select{display:none;} 
        #selector .arrow{position:absolute;right:5px;top:12px;display:block;height:0;width:0;border-top:8px solid red;border-right:5px solid transparent;border-left:5px solid transparent;}
        #selector .mr-selector{display:block;height:30px;width:200px;padding-left:10px;border:1px solid red;cursor:default;}
        #selector .select{display:none;width:210px;margin-top:-1px;border:1px solid red;}
        #selector .select li{height:30px;line-height:30px;padding-left:10px;}
        #selector .select li:hover{background:red;color:#fff;cursor:default;}
    </style>
    <title>selector插件</title></head><body>
    <p id="selector">
        <select class="hd-selector">
            <option value="0" selected="selected">默认选项</option>
            <option value="1">选项内容一</option>
            <option value="2">选项内容二</option>
            <option value="3">选项内容三</option>
            <option value="4">选项内容四</option>
        </select>
        <span class="mr-selector">请选择选项</span>
        <span class="arrow"></span>
        <ul class="select">
            <li>请选择选项</li>
            <li>选项内容一</li>
            <li>选项内容二</li>
            <li>选项内容三</li>
            <li>选项内容四</li>
        </ul>
    </p>
    <script src="../Util/jquery-1.11.3.min.js"></script>
    <script>
        (function(){

            var selector = $("#selector");            var select = $("#selector .select");  //模拟select的ul选项
            var mrSelector = $("#selector .mr-selector");            var li = $("#selector .select li"); //li选项

            selector.click(function(eve){
                eve.stopPropagation();   //阻止冒泡避免点击后消失    
            });

            mrSelector.click(function(){
                select.toggle();
            });

            li.click(function(eve){
                var index = $(this).index();
                console.log(index);                var text = $(this).text();  //获取当前点击li文本
                mrSelector.text(text);      //赋值默认选项文本
                console.log($("#selector .hd-selector option"));
                selector.find(".hd-selector option").eq(index)
                    .attr("selected","selected").siblings().removeAttr("selected");
                $(this).parent().hide();

            });

            $("body").click(function(){
                select.hide();
            });

        }());    </script></body></html>

div는 기본 선택 효과 예시 공유를 시뮬레이션합니다.

관련 기사