1200字范文 > jquery案例10——下拉列表显示二级菜单

jquery案例10——下拉列表显示二级菜单

时间：2022-04-23 04:05:18

一、案例效果

二、案例完成代码（方法多种）

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>下拉列表展示</title><script src="./js/jQuery.min.js"></script><style>* {margin: 0;padding: 0;}a {display: block;text-decoration: none;color: #fff;}body {background: #2196f3;/* fallback for old browsers */background: -webkit-linear-gradient(to right, rgb(33, 150, 243), rgb(244, 67, 54));/* Chrome 10-25, Safari 5.1-6 */background: linear-gradient(to right, rgb(33, 150, 243), rgb(244, 67, 54));/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */}#menu {width: 450px;margin: 40px auto;}img {width: 20px;height: 16px;float: right;margin-top: 17px;}dl {line-height: 50px;margin-bottom: 20px;}dt {background-color: rgba(0, 0, 0, 0.3);font-weight: bold;padding: 0 20px;border-radius: 5px;}.cont {background-color: rgba(0, 0, 0, 0.1);padding: 20px;border-radius: 5px;color: #fff;}</style></head><body><div id="menu"><dl><dt><a href="#"><img src="img/list_up.png" /><span>电影</span></a></dt><div class="cont"><dd>《这个杀手不太冷静》</dd><dd>《无间道》</dd><dd>《熊出没 · 重返地球》</dd><dd>《速度与激情9》</dd><dd>《千与千寻》</dd></div></dl><dl><dt><a href="#"><img src="img/list_down.png" /><span>歌曲</span></a></dt><div class="cont"><dd>《Unpredictable》</dd><dd>《反方向的钟》</dd></div></dl><dl><dt><a href="#"><img src="img/list_down.png" /><span>动漫</span></a></dt><div class="cont"><dd>《时光代理人》</dd><dd>《大理寺日志》</dd><dd>《犬夜叉》</dd></div></dl></div><script>// 1.突兀的显示隐藏// $(function() {//$('.cont:gt(0)').hide();//$('#menu dt').click(function() {// var $showDd = $(this).siblings();// console.log($showDd);// console.log($showDd.is(":visible"));// if ($showDd.is(":visible")) { //为真// $showDd.hide(); //为真隐藏// $(this).find('img').prop('src', 'img/list_down.png');// } else {// $showDd.show(); //为假显示// $(this).find('img').prop('src', 'img/list_up.png');// }//})// });// 2.带滑动的效果的// $(function() {//$('.cont:gt(0)').hide();//$('#menu dt').click(function() {// var $showDd = $(this).siblings();// if ($showDd.is(":visible")) { //为真// $showDd.slideUp(); //为真隐藏// $(this).find('img').prop('src', 'img/list_down.png');// } else {// $showDd.slideDown(); //为假显示// $(this).find('img').prop('src', 'img/list_up.png');// }//})// });// 3.点击标题，自己的展开，其他的都隐藏// $(function() {////隐藏所有子栏目（除第一个栏目外）//$('.cont:gt(0)').hide();////点击大栏目//$('#menu dt').click(function() {// //获取当前点击dt的兄弟元素div// var $showDd = $(this).siblings();// //获取当前点击dt的父亲元素dl的其他兄弟元素里面的div内容模块// var $parentCont = $(this).parent('dl').siblings().find('.cont');// //获取当前点击dt的父亲元素dl的其他兄弟元素里面的图片// var $parentImg = $(this).parent('dl').siblings().find('img');// //判断，如果该栏目下面的小栏目是显示的，则隐藏（并修改图片）；否则，显示（修改图片）// if ($showDd.is(":visible")) { //为真// $showDd.slideUp(); //为真隐藏// $(this).find('img').prop('src', 'img/list_down.png');// } else {// $showDd.slideDown(); //为假显示// $(this).find('img').prop('src', 'img/list_up.png');// // 获取好的元素进行隐藏// $parentCont.slideUp();// // 同时图片要进行变化，让下箭头展示出来// $parentImg.prop('src', 'img/list_down.png');// }//})// });// 还是第三种效果$(function() {$('.cont:gt(0)').hide();$('#menu dt').click(function() {var $showDd = $(this).siblings();if ($showDd.is(":visible")) {$showDd.slideUp();$(this).find('img').prop('src', 'img/list_down.png');} else {$showDd.slideDown();$(this).find('img').prop('src', 'img/list_up.png');$(this).parent('dl').siblings().find('.cont').slideUp()$(this).parent('dl').siblings().find('img').prop('src', 'img/list_down.png');};});});</script></body></html>

三、进阶版本

（一）案例效果

（二）案例完整代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学生的下拉菜单</title><script src="./js/jQuery.min.js"></script><style>* {margin: 0;padding: 0;}html,body {height: 100%;}#content {overflow: hidden;}#list {width: 20%;float: left;background: #00b09b;/* fallback for old browsers */background: -webkit-linear-gradient(to right, rgb(0, 176, 155), rgb(150, 201, 61));/* Chrome 10-25, Safari 5.1-6 */background: linear-gradient(to right, rgb(0, 176, 155), rgb(150, 201, 61));/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */height: 100vh;}dl {margin-bottom: 20px;}dt {padding: 10px 20px;background-color: rgba(0, 0, 0, 0.5);color: #fff;border-radius: 5px;}dt img {width: 20px;height: 15px;float: right;margin-top: 3px;}dd {background-color: rgba(0, 0, 0, 0.2);border-radius: 5px;display: none;color: #fff;}ul li {list-style: none;line-height: 35px;padding: 0 20px;margin-bottom: 5px;}#rightBox {float: right;width: 78%;background: #00b09b;/* fallback for old browsers */background: -webkit-linear-gradient(to left, rgb(0, 176, 155), rgb(150, 201, 61));/* Chrome 10-25, Safari 5.1-6 */background: linear-gradient(to left, rgb(0, 176, 155), rgb(150, 201, 61));/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */height: 100vh;padding: 20px;box-sizing: border-box;}#rightBox div {display: none;}</style></head><body><div id="content"><div id="list"><dl class="firstDl"><dt>娱乐<img src="./img/list_down.png"/></dt><dd><ul class="navLi"><li>电视剧</li><li>电影</li><li>歌曲</li><li>动漫</li></ul></dd></dl><dl><dt>学习<img src="./img/list_down.png"/></dt><dd><ul class="navLi"><li>前端</li><li>美工</li><li>后台</li></ul></dd></dl><dl><dt>生活<img src="./img/list_down.png"/></dt><dd><ul class="navLi"><li>衣</li><li>食</li></ul></dd></dl></div><div id="rightBox"><div><ol style="list-style-position:inside;"><li>《有匪》</li><li>《猎罪图鉴》</li><li>《开端》</li><li>《陈情令》</li></ol></div><div>电影</div><div>歌曲</div><div>动漫</div><div>前端</div><div>美工</div><div>后台</div><div>衣服</div><div>食物</div></div></div><script>$(function() {$('dt').click(function() {var $dd = $(this).siblings();if ($dd.is(':visible')) {// 当前可见// console.log('当前可见');$dd.stop().slideUp();$(this).find('img').prop('src', './img/list_down.png')} else {// console.log('当前不可见');$dd.stop().slideDown();$(this).find('img').prop('src', './img/list_up.png');$(this).parent().siblings().find('dd').stop().slideUp();$(this).parent().siblings().find('img').prop('src', './img/list_down.png');}})$('li').click(function() {$(this).css('background-color', 'rgba(0,0,0,0.2)');$('.navLi li').not(this).css('background-color', ''); //除了自己的其他同类元素// console.log($('li').index($(this)));$liIndex = $('li').index($(this));console.log($liIndex);$('#rightBox div').eq($liIndex).show().siblings().hide();})});</script></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。