一、案例效果

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

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

jquery案例10——下拉列表显示、二级菜单相关推荐

菜单栏点击显示二级菜单_显示完整菜单
菜单栏点击显示二级菜单 On my own computer, I like to see the full menus in Excel, so I selected that setting: 在 ...
前端----HTML/JS 鼠标停留和移开实例----鼠标指示时显示二级菜单(共三级)
onmouseover和onmouseout事件和各种position定位的练习, 效果是鼠标指示一级菜单显示二级菜单, 指示二级菜单的选项出现相应三级菜单效果图: 一级菜单: 鼠标停留时的二级菜: ...
html鼠标点击显示二级菜单内容,怎样操作js实现二级菜单点击显示当前内容
这次给大家带来怎样操作js实现二级菜单点击显示当前内容,操作js实现二级菜单点击显示当前内容的注意事项有哪些,下面就是实战案例,一起来看一下. 最近做了一个二级菜单点击事件的效果,一级菜单有3个,二级 ...
jquery案例7——王者显示与隐藏、淡入、淡出、遮罩层、fadeIn、fadeOut
一.案例描述鼠标经过模块显示遮罩层,离开恢复原样. 二.案例效果演示四.案例整体代码
php实现鼠标悬停显示下拉菜单,Html中鼠标悬停显示二级菜单的两种方法
Windows Phone 8.1中处理后退键的HardwareButtons.BackPressed事件在WP8中,处理后退键比较简单,重写OnBackKeyPress事件即可.如经常用的双击后退 ...
Python稳基修炼的经典案例10（计算机二级、初学者必会turtle库例题）
文章目录 1.绘制同心圆 2.绘制叠加等边三角形 3.绘制八角星型 4.绘制树形图 1.绘制同心圆 import turtle as t def DrawCetCircle(n):t.penup()t ...
鼠标滑过，二级菜单显示
使用css方式,实现菜单效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
Jquery垂直下拉二级菜单
自己做了一个基于Jquery 的垂直下拉二级菜单功能,直接看图: Html的代码如下: <!DOCTYPE html> <html><head><meta c ...
html二级菜单显示与隐藏,Vue实现二级菜单的显示与隐藏
Vue实现二级菜单的显示与隐藏 *{ padding: 0; margin: 0; font-size: 14px; } ul{ width: 200px; height: auto; } h2{ b ...

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

一、案例效果

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

三、进阶版本

（一）案例效果

（二）案例完整代码

jquery案例10——下拉列表显示、二级菜单相关推荐

最新文章

热门文章