zoukankan      html  css  js  c++  java
  • jQuery插件:模拟select下拉菜单

    没搞那么复杂,工作中,基本够用。。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery插件:模拟select下拉菜单</title>
    <style>
    /* css reset */
    body,ul,ol,li,dl,dt,dd,h1,table,tr,td,thead,tbody,tfoot,h2,h3,h4,h5,h6,p,img,label,input,textarea,button,hr {margin:0;padding:0;}
    body,input,select,button,textarea {font:12px/18px arial;color:#666;}
    h1,h2,h3,h4,h5,h6 {font-family:Microsoft YaHei,simhei,tahoma,arial; }
    a {color:#069;text-decoration:none;}
    ul,ol {list-style:none;}
    li {*zoom:1;}
    i,em {font-style:normal;}
    input,textarea,select,a,button {outline:none;}
    input,img {vertical-align:middle;}
    textarea {overflow:auto;resize:none;}
    img {border:none;}
    table {border-collapse:collapse;border-spacing:0;}
    .arrow {0;height:0;overflow:hidden;border-4px;border-color:transparent;border-style:solid;_border-style:dashed;display:inline-block;*display:inline;*zoom:1;vertical-align:middle;}
    
    /* dropdown */
    .dropdown {height:35px;position:relative;line-height:35px;font-size:14px;border:1px solid #ccc;cursor:pointer;}
    .dropdown a {height:100%;padding:0 10px;display:block;color:#333;}
    .dropdown > a {padding-right:30px;}
    .dropdown .arrow {position:absolute;top:15px;right:10px;border-top-color:#999;}
    .dropdown p {100%;position:absolute;top:100%;left:-1px;z-index:9;border:1px solid #ccc;border-top:none;background-color:#fff;display:none;}
    .dropdown p a:hover {background-color:#069;color:#fff;}
    .dropdown.open .arrow {top:9px;border-top-color:transparent;border-bottom-color:#666;}
    
    /* option */
    .option {200px;margin:20px;}
    </style>
    </head>
    
    <body>
    
    
    <div class="option">
    	<a href="javascript:;">请选择</a>
        <i class="arrow"></i>
        <p>
        	<a href="javascript:;">语文</a>
        	<a href="javascript:;">数学</a>
        	<a href="javascript:;">英语</a>
        </p>
    </div>
    
    
    
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
    ;(function($) {
        $.fn.extend({
            dropdown : function() {
                $(this).each(function() {
                    var self = $(this);
                    var act = self.children("a");
                    var para = self.children("p");
                    var links = para.find("a");
                    self.addClass("dropdown");
                    links.filter(":contains("+ act.text() +")").hide();
                    self.on("click", function() {
                        para.toggle();
                        self.toggleClass("open");
                        links.on("click", function() {
                            var _this = $(this);
                            act.text(_this.text());
                            _this.hide().siblings().show();
                        })
                        return false;
                    })
                    $(document).on("click", function() {
                        para.hide();
                        self.removeClass("open");
                    });
                });
            }
        });
    })(jQuery);
    </script>
    
    <script>
    $(function() {
    	$(".option").dropdown();
    });
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    ue4 官网IK流程记录
    ue4-C++中加载一个蓝图类(二)-C++中绑定Blueprint武器
    UE4 c++ 创建刚体Cube
    UE4的AI学习(1)——基本概念
    UE4的AI学习(2)——官方案例实例分析
    行为树(Behavior Tree)实践(1)– 基本概念
    Animation Blueprint, Set Custom Variables Via C++
    ue4 c++ anim notify
    ue4 动画相关方法杂记
    [UE4]Montage动画设置Slot
  • 原文地址:https://www.cnblogs.com/huanlei/p/3765799.html
Copyright © 2011-2022 走看看