Use JS to implement drop-down box function

This time I will bring you the use of JS to implement the drop-down box function, and what are the precautions for using JS to implement the drop-down box function. The following is a practical case, let's take a look.

  ="content-type"content=>  =>
    *{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;} 
  <scriptsrc=>=> 
<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>
  ="select_contain">
      =>
        =>
   
        =>
          ="select_result">
            选择节目
            ="triangle">

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Angular2 development component step-by-step explanation

Ajax processing user session failure

How to deal with http hijacked floating ads

The above is the detailed content of Use JS to implement drop-down box function. For more information, please follow other related articles on the PHP Chinese website!