Home > Article > Web Front-end > Detailed explanation of sample code for implementing drop-down box effect (select) in js

Detailed explanation of sample code for implementing drop-down box effect (select) in js

黄舟Original: 2017-03-28 14:46:131540browse

This article mainly introduces js method examples to achieve the drop-down box effect. Has very good reference value. Let’s take a look at it with the editor below

Rendering:

##The code is as follows:

<!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>

The above is the detailed content of Detailed explanation of sample code for implementing drop-down box effect (select) in js. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Sample code sharing for implementing the function of counting remaining words in a multi-line text box using jsNext article：Sample code sharing for implementing the function of counting remaining words in a multi-line text box using js

See more

Detailed explanation of sample code for implementing drop-down box effect (select) in js

Related articles