js--下拉列表选中(js和jquery两种方法 )

最新推荐文章于 2020-04-01 17:57:35 发布

sevenbblythelulu

最新推荐文章于 2020-04-01 17:57:35 发布

阅读量718

点赞数

分类专栏：成品 js

本文链接：https://blog.csdn.net/sevenbblythelulu/article/details/46724213

版权

成品同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

      
      
       
       <span class="bind_font">我不是90后...</span><img src="img/select.png" class="arrow">
      
      
      
      
       
           <ul class="select" >
      
      
      
      
       
                   <li class="li">我是50后</li>
      
      
      
      
       
                   <li class="li">我是60后</li>
      
      
      
      
       
                   <li class="li">我是70后</li>
      
      
      
      
       
                   <li class="li">我是80后 <img src="img/right.png" class="right_img"></li>
      
      
      
      
       
                   <li class="li">我是90后</li>
      
      
      
      
       
                   <li class="li">我是00后</li>
      
      
      
      
       
           </ul>
      
      
      
      

      
      
      
      
       
       $(function(){ 
      
      
      
      
       
           $('#birth').click(function(){
      
      
      
      
       
             if ($(".select").is(':hidden')) {
      
      
      
      
       
             	$(".select").fadeIn(); 
      
      
      
      

      
      
      
      
       
             }else{
      
      
      
      
       
       		$(".select").fadeOut();
      
      
      
            
      
      
      
            	
      
      
      
      
       
             };
      
      
      
                	
      
      
      
      
       
           });//不能事件嵌套事件
      
      
      
      
       
           $(".li").bind("click",function(e) {   //事件代理
      
      
      
      
       
              console.log(e.target.innerHTML);//测试
      
      
      
      
       
              $(".li img").remove();
      
      
      
      
       
              $(".bind_font").html(e.target.innerHTML);
      
      
      
      
       
              $(this).append("<img src='img/right.png' class='right_img'>");
      
      
      
      
       
           });  
      
      
      
      
       
       });
      
      
      
      

      
      
      
      

      
      
      
      

      
      
      
      

      
      
      
      
       
       第二种纯js编码：innerHTML可以用textContent代替
      
      
      
      
       
                     querySelector、querySelectorAll（html5、DOM选取元素）
      
      
      
      

      
      
      
      
       
               
        
         
         <!DOCTYPE html>
        
        
        
        
         
         <head>
        
        
        
        
         
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
        
        
        
         
         <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
        
        
        
        
         
         <title>下拉列表</title>
        
        
        
        
         
         </head>
        
        
        
        
         
         <style>
        
        
        
        
         
         *{margin:0 auto; padding:0px; text-align:center;}
        
        
        
        
         
         ul,li{list-style:none;}
        
        
        
        
         
         .div2{ position:relative; background:#ccc;width: 200px;height: 30px;line-height:30px;}
        
        
        
        
         
         #showul{color: white;width: 2px;height: 2px;right:26px; position:absolute;}
        
        
        
        
         
         ul li { background:#eee;width: 200px;height: 30px; line-height:30px;}
        
        
        
        
         
         ul li:hover {color: #fff; background:#71adaa; }
        
        
        
        
         
         </style>
        
        
        
        

        
        
        
        
         
         <body>   
        
        
        
        
         
             <div class="div2">
        
        
        
        
         
         	   <span class="content">My box </span><span id="showul" >▼</span>
        
        
        
        
         
         	</div>
        
        
        
        
         
             <ul id="testul" style="display:none">
        
        
        
        
         
                 <li>item1</li>
        
        
        
        
         
                 <li>item2</li>
        
        
        
        
         
                 <li>item3</li>
        
        
        
        
         
             </ul>
        
        
        
        
         
         </body>
        
        
        
        
         
         <script>
        
        
        
        
         
         var show= document.querySelector(".div2"),
        
        
        
        
         
             showul=document.querySelector("#showul"),
        
        
        
        
         
             content=document.querySelector(".content"),
        
        
        
        
         
             testul = document.querySelector("#testul");
        
        
        
        
         
         show.addEventListener('click', function(e) {
        
        
        
        
         
             switch (testul.style.display) {
        
        
        
        
         
                 case 'block':
        
        
        
        
         
                     showul.innerHTML = "▼";
        
        
        
        
         
                     testul.style.display = 'none';
        
        
        
        
         
                     break;
        
        
        
        
         
                 case 'none':
        
        
        
        
         
                     showul.innerHTML = "▲";
        
        
        
        
         
                     testul.style.display = 'block';
        
        
        
        
         
                     break;
        
        
        
        
         
             }
        
        
        
        
         
         }, false);
        
        
        
        
         
         testul.addEventListener('click', function(e) {
        
        
        
        
         
             showul.innerHTML = "▼";
        
        
        
        
         
             testul.style.display = 'none';
        
        
        
        
         
             content.innerHTML = e.target.innerHTML;
        
        
        
        
         
         }, false);
        
        
        
        

        
        
        
        
         
         </script>
        
        
        
        

        
        
        
        
         
         </html>