I. key points of development

In web pages, we usually don't use select or option to achieve the pull-down menu effect, because the style of the pull-down box is ugly and difficult to beautify, so we choose to control ul display and hide to achieve the same and tall effect, but we can't click other parts of the page like the pull-down box, and the pull-down menu is folded or hidden. What should we do? It can only be controlled by js.

Two, code

    HTML:

<div class="select_box" id="selected">
    <div class="select">
        <span>Please choose</span>
    </div>
    <ul class="list">
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
     </ul>
 </div>

    CSS:

 <style type="text/css">
      *{margin:0;padding:0}
      ul,ol{list-style: none}
      .select_box{
          position:relative;
          margin:100px auto;
          width:300px;
      }
      .select{
          padding:5px 10px;
          border:1px solid #dedede;
      }
      .select:hover{
          cursor:pointer;
      }
      .select span{
          display: block;
          background:url("../../img/downicon.png") no-repeat right;
      }
      .list{
          display: none;
          position:absolute;
          top:30px;
          width:298px;
          border:1px solid #dedede;
          border-top:none;
      }
      .list li{
          padding:5px 10px;
      }
      .list li:hover{
          background:#ddd;
      }
 </style>

    JS:

  $(function(){
     $(".select").click(function(){
        $(".list").toggle();
     })
     $(".list li").click(function(){
        $(".select span").html($(this).html());
        $(".list").hide();
     })
     $(document).bind("click",function(e){
        var e = e || window.event;    //Event object, compatible IE
        var target = e.target || e.srcElement;  //Source object, compatible with Firefox and IE
        while(target){
           if (target.id && target.id == "selected"){    //Loop judgment to the root node to prevent clicking#selected and its children
              return;
        }
           target = target.parentNode;
        }
           $(".list").hide();   //It's not#selected and its child elements, hide the drop-down menu
        })
   })

Effect: