cari

Rumah  >  Artikel  >  hujung hadapan web  >  js实现下拉框效果（select）的示例代码详解

js实现下拉框效果（select）的示例代码详解

黄舟
黄舟asal
2017-03-28 14:46:131558semak imbas

本文主要介绍了js实现下拉框效果的方法实例。具有很好的参考价值。下面跟着小编一起来看下吧

效果图：

js实现下拉框效果（select）的示例代码详解

代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html >
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
    *{padding: 0;margin:0;}
    ul,li{list-style: none}
    .left{float: left;}
    .right{float: right;}
    .select_contain{font-size: 14px;color: #333;line-height: 38px;margin: 30px 0;}
    .select_item{margin-right: 50px;position: relative;}
    .select_tit{margin-right: 20px;}
    .select_result{width: 100px;line-height: 38px;border:1px solid #ccc;text-align: center;border-radius: 4px;text-indent: -8px;cursor:pointer;}
    .select_result .triangle{border:5px solid transparent;border-top:5px solid #666;position: absolute;top: 16px; right:8px;}
    .select_item ul{display:none;position:absolute;top:100%;right:0;width:100px;background: #f3f3f3;border:1px solid 
    #ccc;border-radius:0 0 4px 4px; border-top-color:#f3f3f3;margin-top:-4px;}
    .select_item ul li{text-align: center;cursor: pointer;}
    .select_item ul li:hover{background: #f4a100; color: #fff;}
  </style>
  <script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
  <script>
  function select(){
    $(document).click(function(){
      $(".select_module_con ul").slideUp();
    })
    var module=$(".select_result"); 
    module.click(function(e){
      e.stopPropagation();
      var ul=$(this).next();
      ul.stop().slideToggle();
      ul.children().click(function(e){
        e.stopPropagation();
        $(this).parent().prev().children("span").text($(this).text());
        ul.stop().slideUp();
      })
    })
  }
  $(function(){
    select(); 
  })
  </script>
</head>
<body>
  <p class="select_contain">
      <p class="select_item clearfix left">
        <p class="select_tit left">选择节目:</p>
        <p class="select_module_con left">
          <p class="select_result">
            <span>选择节目</span>
            <p class="triangle"></p>
          </p>
          <ul>
            <li>节目1</li>
            <li>节目2</li>
            <li>节目3</li>
          </ul>
        </p>
      </p>
      <p class="select_item clearfix left">
        <p class="select_tit left">选择嘉宾:</p>
        <p class="select_module_con left">
          <p class="select_result">
            <span>选择嘉宾</span>
            <p class="triangle"></p>
          </p>
          <ul>
            <li>嘉宾1</li>
            <li>嘉宾2</li>
            <li>嘉宾3</li>
          </ul>
        </p>
      </p>
   </p>
</body>
</html>

Atas ialah kandungan terperinci js实现下拉框效果（select）的示例代码详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js实现多行文本框统计剩余字数功能的示例代码分享Artikel seterusnya：详解从Node.js的child_process模块来学习父子进程之间的通信的示例代码

Artikel berkaitan

Lihat lagi