去做的过程中，总会发现新的问题~~~所以 我就记一下，免得下次又有同样的需求，我又要重新思考 哈哈哈哈 也是很偷懒啦~~~毕竟 嗯 记忆力太差
That`s all~~
Happy Ending!!!
这里再给出一个完整示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://apps.bdimg.com/libs/vue/1.0.14/vue.js"></script> <title> 多选下拉</title> <style> *{ padding: 0px; margin: 0px; } .zj-div{ position: relative; left: 50px; top: 50px; } .btn,li{ width: 200px; height: 50px; border: 1px solid #01bfda; border-radius: 15px; background: #000d16; color:white; line-height: 50px; text-align: center; font-size: 18px; } ul { display: none; width: 220px; } li { list-style: none; } li:hover{ cursor: pointer; background: #535a5c; } li[check="true"] { background: #01bfda; } </style> </head> <body> <div> <div>全部级别</div> <ul> <li v-for="item in myData">{{item}}</li> </ul> </div> <script> new Vue({ el:".zj-div", data:{ myData:["全部级别","一级","二级","三级"], } }) $(document).ready(function(){ var len = $('ul').children('li').length; $('.btn').click(function(e) { $('ul').slideToggle(); e.stopPropagation(); }); //点击.btn实现ul的收放 $(document).not($('.list')).click(function(e){ $('ul').slideUp(); }) //.not方法就是除去当前这个元素 //点击页面除了li的其他部分时，ul收起 for(let i = 0; i < len; i++){ var firstAll = $('ul').children().first(); var arr = []; //为绑定.btn的值创建一个数组 $('li').eq(i).click(function(e){ e.stopPropagation(); //因为事件冒泡机制，一定要注意取消时间冒泡 if($(this).attr('check')!=="true"){ if($(this).text()=="全部级别"){ //如果当前点击的是“全部级别”，则所有的li背景都改变 $(this).attr('check','true'); $(this).siblings().attr('check',"true"); // arr.push($(this).text()); $('.btn').text($(this).text()); arr = ["一级","二级","三级"]; //此时.btn显示"全部级别" }else{ $(this).attr('check','true'); //如果当前点击的li是其他的，则当前li背景改变 if(arr.includes($(this).text())){ $('.btn').text(arr); //分情况讨论此时.btn应该如何显示 }else{ //注意结合arr arr.push($(this).text()); $('.btn').text(arr); } } if($(this).text()!=="全部级别"&&firstAll.next().attr('check')=='true'&&firstAll.next().next().attr('check')=='true'&&firstAll.next().next().next().attr('check')=='true'){ $('ul').children().first().attr('check','true'); $('.btn').text($('ul').children().first().text()); } //if判断语句，我觉得肯定有其他的方法，我这个简直太简单粗暴了，可是我还没想到... //这是我们应该考虑的一种情况，当其他几项全选时，"全部级别"应该默认被选中 }else{ if($(this).text()=="全部级别"){ //同理，当当前元素被选中，再被点击时要取消选中 $(this).attr('check','false'); $(this).siblings().attr('check',"false"); $('.btn').text($(this).text()); //注意此时，虽然.btn显示为"全部级别" arr = []; //但实际上没有任何元素被选中，所以arr实际为空 }else{ $(this).attr('check','false'); $('ul').children().first().attr('check','false'); for(var a = 0 ; a < arr.length; a++){ if(arr[a] == $(this).text()){ arr.splice(a,1); //数组方法，删除索引为a的一个元素 $('.btn').text(arr); if(arr.length == 0){ //如果arr数据为空，那么.btn显示"全部级别" $('.btn').text(firstAll.text()) } } } } } }) } }) </script> </body> </html>
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：运行上述代码，测试运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》