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

最新推荐文章于 2023-02-14 16:47:09 发布
最新推荐文章于 2023-02-14 16:47:09 发布
阅读量919 收藏 9
点赞数 2
分类专栏： jquery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xulihua_75/article/details/124809885
版权

一、案例效果

请添加图片描述

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

<!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>
耶啵奶膘
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现二级下拉菜单
LiRenxian0316的博客
07-08 1881
jQuery实现二级下拉菜单&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;二级下拉菜单&lt;/title&gt; &lt;style&gt; /* 公共样式 */ body,ul,li {
jQuery二级下拉菜单
08-28
利用JavaScript中的select标签模仿新浪微博的二级下拉菜单
jquery实现鼠标悬浮滑动下拉二级菜单
MySunshine07的博客
07-21 4804
1、HTML部分 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;鼠标悬浮滑动下拉二级菜单&lt;/title&gt; &lt;link rel="stylesheet&quo
jquery竖向渐变显示二级下拉菜单
06-06
js写的又一个菜单特效，js在菜单方面的表现力越来越强~好的作品不断出现~是否已经能满足菜单的需求~flash制作menu是否过于累赘？？
JS二级下拉列表
09-26
简单的JS下拉二级菜单。效果显著。可以重复使用的并且代码简单
Jquery实现二级下拉选择框
weixin_50813407的博客
11-15 763
【代码】Jquery实现二级下拉选择框。
jQuery练习——下拉菜单
m0_55394328的博客
09-12 3308
哈喽大家好，本次是jQuery案例练习系列第一期，本期是用jQuery实现下拉菜单。 笔者还是前端的菜鸟，还请大家多多指教呀~
jQuery实现下拉菜单
sleepwalker_1992的专栏
05-17 7245
html文件&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;下拉菜单&lt;/title&gt; &lt;link rel="stylesheet" type="
jQuery实现下拉菜单[代码+详细讲解+效果图]
心态的博客
05-09 1万+
jQuery实现下拉菜单[代码+详细讲解+效果图] 非常的高效。
jQuery鼠标滑过显示二级下拉菜单代码.zip
07-11
jQuery鼠标滑过显示二级下拉菜单代码
jQuery垂直手风琴多级下拉菜单代码
06-05
这是一款通过将不同的子菜单进行分组，制作出扁平风格多级菜单效果的jQuery垂直手风琴多级下拉菜单代码。
Jquery实现下拉框、多级联动
11-08
jquery实现的多级联动下拉框，由div标签加上span标签实现。
jquery实现鼠标滑过显示二级下拉菜单效果
10-23
主要介绍了jquery实现鼠标滑过显示二级下拉菜单效果,通过jquery操作鼠标事件及页面样式动态变换实现该功能,非常具有实用价值,需要的朋友可以参考下
jQuery鼠标经过二级菜单下拉代码
04-02
jQuery鼠标经过二级菜单下拉代码是一款基于jQuery+CSS3实现的鼠标悬浮滑动下拉二级菜单特效。
前端入门篇（四十六）JS应用1二级下拉菜单问题记录
安之ccy的博客
02-19 641
一级菜单问题记录： html文件： <body> <div> <div class="container"> <ul class="nav-list clearfixed"> <li><a href="">首页</a></li> <li><a href="">关于蝉壳</a
Web前端开发实战2：二级下拉式菜单之JS实现
热门推荐
life is wonderful
12-31 1万+
上一篇博文提到了二级下拉式菜单是用HTML和CSS实现的，我们这一篇来用JavaScript脚本实现下拉菜单的显 示和隐藏。使用 JavaScript方法实现我们需要用的知识有：         1)JS事件：onmouseover鼠标经过事件和onmouseout鼠标离开事件。         2)JS基础语法：使用function关键字定义函数。         3)DOM编程：get
jQuery 简单介绍，二级菜单（HTML+css；JavaScript；jQuery三种实现方式）
qq_43434300的博客
04-03 3017
jQuery简介 jQuery 库可以通过一行简单的标记被添加到网页中。 在您开始学习 jQuery 之前，您应该对以下知识有基本的了解：HTML、CSS、JavaScript。 什么是 jQuery ？ jQuery是一个JavaScript函数库。 jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery库包含以下功能： HTML 元素选取 HTML 元素操作 C...
分别用html/css、javascript、jQuery实现下拉菜单的显示和隐藏
HuLuWa1997的博客
11-21 4318
一、html/css实现下拉菜单的显示和隐藏 简单来说就是通过对css样式的控制来实现下拉菜单的显示和隐藏 具体代码示例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...
html中二级菜单以及主页的实现，HTML+css
weixin_63478784的博客
02-14 3887
t图书管理系统中使用HTML+css实现的二级菜单以及首页，也有float属性
Jquery实现鼠标悬停显示二级菜单
最新发布
06-03
您的问题是如何使用jQuery实现鼠标悬停显示二级菜单，对吗？ 以下是一个简单的示例代码，可以帮助您实现这个效果： HTML代码： ``` <li><a href="#">菜单1 <li><a href="#">子菜单1</a></li> <li><a href=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值