模擬美化select下拉選單程式碼例項

admin發表於2017-05-16

HTML自帶的<select>下拉選單美觀度不夠，可以通過模擬來解決此問題。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>螞蟻部落</title>
</head>
<style type="text/css">
  .ins-box {
    width: 100px;
    height: 50px;
    margin: 100px auto;
  }

  .ins-select {
    width: 120px;
    height: 26px;
    position: relative;
    font-size: 16px;
    float: left;
    color: #5F5F5F;
  }

  .ins-select dl {
    border: 1px solid #FF3C34;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    background-image: url(http://i4.buimg.com/1949/1ac9f315a7a4580b.png);
    background-repeat: no-repeat;
    background-position: 90% 50%;
    color: #5F5F5F !important;
  }

  .ins-option {
    top: 46px;
    width: 120px;
    position: absolute;
    background-color: #fff;
    border: 1px solid #aaa;
    display: none;
    z-index: 100;
  }

  .ins-option dd {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    font-size: 14px;
    -webkit-margin-start: 0px
  }

  .ins-option dd:hover {
    background: #FF3C34;
    color: #ffffff;
  }
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script>
  $(function () {
    $(document).bind("click", function (e) {
      var target = $(e.target);
      //點選目標 標題欄(.select dt)時,收回全部選項表,展開當前選項表
      if (target.closest(".ins-select dl").length != 0) {
        $(".ins-option").hide();
        target.next('div').show();
      }
      //點選目標 選項(.select dd)時,改變選值到標題欄(dt),儲存選值到title,收回選項表
      if (target.closest(".ins-option dd").length != 0) {
        target.parent('div').prev('dl').text(target.text());
        target.parent('div').prev('dl').attr('title', target.text());
        target.parent('div').hide();
      }
      //點選空白處時收回選項
      if (target.closest(".ins-option").length == 0 && target.closest(".ins-select dl").length == 0) {
        $(".ins-option").hide();
      }
    })
  })
</script>

<body>
  <div class="ins-box">
    <dl class="ins-select">
      <dl title="value">房型</dl>
      <div class="ins-option">
        <dd>一室一廳</dd>
        <dd>一室二廳</dd>
        <dd>一室三廳</dd>
        <dd>一室四廳</dd>
        <dd>一室五廳</dd>
      </div>
    </dl>
  </div>
</body>

</html>

相關文章