您的位置：首页 > Web前端 > JQuery

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

2015-07-02 11:21 676 查看 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30

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


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航