zoukankan      html  css  js  c++  java
  • 自定义下拉列表

    html代码:

     1 <div class="dropdownContainer">
     2     <div class="dropdownDefault">1</div>
     3     <span class="downArrow arrow"></span>
     4     <ul class="dropdown-menu">
     5         <li><a href="#">1</a></li>
     6         <li><a href="#">2</a></li>
     7         <li><a href="#">6</a></li>
     8         <li><a href="#">8</a></li>
     9     </ul>
    10 </div>

    css代码:

    1 .dropdownContainer{position: relative;height: 30px;width: 100%;background: #555;}
    2 .dropdownDefault{border:1px solid #ddd;line-height: 28px;text-indent: 0.5em;}
    3 .dropdownContainer .downArrow{position: absolute;right: 5px;top: 9px}
    4 .dropdown-menu{position: absolute;top:100%;width: 100%;left: 0;background: #555;display: none;overflow-y:scroll;}
    5 .dropdown-menu li{line-height: 24px;}
    6 .dropdown-menu li a{display: inline-block;width: 100%;text-indent: 0.5em}
    7 .dropdown-menu li a:hover{background: #0078b6;font-size: 1.1em;}
    8 .arrow{width: 0;height: 0;display: inline-block;cursor: pointer;}
    9 .downArrow{border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 12px solid #fff;}

    js(jquery)代码:

    1 $(".dropdownDefault,.dropdownContainer .downArrow").click(function(){
    2     $(this).siblings(".dropdown-menu").show();
    3 });
    4  
    5 $(".dropdown-menu li a").click(function(){
    6     $(this).parent().parent().siblings(".dropdownDefault").html($(this).html());
    7     $(this).parent().parent().hide();
    8 });
  • 相关阅读:
    站立会议04(第二阶段)附加站立会议02、03
    第二阶段冲刺---站立会议01
    网络:Session原理及存储
    网络:Xen理解
    网络:LVS负载均衡原理
    网络:OSPF理解
    语音笔记:信号分析
    语音笔记:CTC
    语音笔记:矢量量化
    语音笔记:MFCC
  • 原文地址:https://www.cnblogs.com/nancy0324/p/4194335.html
Copyright © 2011-2022 走看看