【功能说明】
最简单的可取消多选效果(以从水果篮中挑选水果为例)
【html代码说明】
<div class="box" id="box"> <input class="out" placeholder = "请挑选我要的水果" disabled> <button class="btn">合上我的水果篮子</button><br> <ul class="list"> <li class="in red">苹果</li> <li class="in purple">葡萄</li> <li class="in yellow">香蕉</li> <li class="in green">青梅</li> <li class="in orange">桔子</li> </ul> </div>
【css重点代码说明】
//设置展示框中乳白色文字效果 .out{ width: 300px; height:30px; line-height: 50px; padding: 10px; text-align: center; border: 1px solid #ccc; border-radius: 5px; font-size: 20px; color: #f1ebe5; text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff; font-weight: bold; background: linear-gradient(to bottom, #ece4d9 0%,#e9dfd1 100%); vertical-align: middle; } //水果篮显示效果 .list,.list_hid{ height: 50px; line-height: 50px; margin-top: 20px; overflow: hidden; text-align: center; background-color: #ccc; border-radius: 10px; transition: 500ms height; } //水果篮隐藏效果 .list_hid{ height: 0; }
【js代码说明】
//获取整个盒子 var oBox = document.getElementById(‘box‘); //获取按钮 var oBtn = oBox.getElementsByTagName(‘button‘)[0]; //获取展示框 var oOut = oBox.getElementsByTagName(‘input‘)[0]; //获取水果篮子 var oList = oBox.getElementsByTagName(‘ul‘)[0]; //获取水果篮子里面的所有水果 var aIn = oList.getElementsByTagName(‘li‘); //给按钮绑定事件 oBtn.onclick = function(){ //若list的className为list,说明此时水果篮子处于打开状态 if(oList.className == ‘list‘){ //更改其className为list_hid,关闭水果篮子 oList.className = ‘list_hid‘; //设置文字显示为打开我的水果篮子 this.innerHTML = ‘打开我的水果篮子‘; //此时水果篮子处于关闭状态 }else{ //更改其className为list,打开水果篮子 oList.className = ‘list‘; //设置文字显示为合上我的水果篮子 this.innerHTML = ‘合上我的水果篮子‘; } } for(var i = 0; i < aIn.length; i++){ //给每个水果添加标记,默认为false,表示未被选中 aIn[i].mark = false; //给每个水果添加事件 aIn[i].onclick = function(){ //当水果选中时,取消选中;当水果未选中时,将其选中 this.mark = !this.mark; //若该水果选中,则文字颜色变为亮灰色 if(this.mark){ this.style.color = ‘#ccc‘; //若未选中,则文字颜色为黑色 }else{ this.style.color = ‘black‘; } //运行展示框函数 fnOut(); } } //设置展示框函数 function fnOut(){ //设置临时字符串,来存储展示框要显示的值 var str = ‘‘; for(var i = 0; i < aIn.length; i++){ //当该水果被选中时 if(aIn[i].mark){ //将其innerHTML添加到临时字符串中 str += ‘,‘ + aIn[i].innerHTML; } } //再将最开始第一个水果前的逗号去掉 oOut.value = str.slice(1); };
【效果展示】
时间: 2024-10-10 04:47:02