zoukankan      html  css  js  c++  java
  • ul+js模拟select

    html

     
    css
    .select_box{
      float: left;
    }
    .select_box input{
       160px;
      height: 30px;
      text-align: center;
      font-size: 18px;
      color: #444;
    }
    .select_ul{
      font-size: 14px;
      text-align: center;
      border: 1px solid #D2D3D3;
    }
    .select_ul li{
      height: 50px;
      line-height: 50px;
    }
    .select_ul li:hover{
      background-color: #4EC0EC;
    }
    

      js

    $(".select_box input").click(function(){
          var thisinput=$(this);
          var thisul=$(this).parent().find("ul");
          if(thisul.css("display")=="none"){
    //        if(thisul.height()>200){thisul.css({height:"200"+"px","overflow-y":"scroll" })};
            thisul.fadeIn("100");
            thisul.hover(function(){},function(){thisul.fadeOut("100");})
            thisul.find("li").click(function(){thisinput.val($(this).text());thisul.fadeOut("100");}).hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");});
          }
          else{
            thisul.fadeOut("fast");
          }
        })
    //    $("#submit").click(function(){
    //      var endinfo="";
    //      $(".select_box input:text").each(function(i){
    //        endinfo=endinfo+(i+1)+":"+$(this).val()+";
    ";
    //      })
    //      alert(endinfo);
    //    })
    

      

  • 相关阅读:
    解题:NOI 2007 社交网络
    解题:2018九省联考 一双木棋
    125. 背包问题 II
    152. 组合
    140. 快速幂
    148. 颜色分类
    144. 交错正负数
    83. 落单的数 II
    124. 最长连续序列
    59. 最接近的三数之和
  • 原文地址:https://www.cnblogs.com/jymz/p/4173926.html
Copyright © 2011-2022 走看看