HTML+jQuery折叠菜单

最新推荐文章于 2024-09-23 09:28:04 发布
最新推荐文章于 2024-09-23 09:28:04 发布
阅读量567 收藏 3
点赞数
分类专栏： html jQuery 文章标签： jquery html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lq24244/article/details/115915205
版权 
点击一级菜单则展开二级菜单
展开收起动画效果

在这里插入图片描述
完整代码,需要引入jQuery.JS文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .nav {
            list-style: none;
            width: 300px;
            margin: 100px auto;

        }

        .nav > li {
            border: 1px solid #000;
            line-height: 35px;
            border-bottom: none;
            position: relative;
        }

        .nav > li:last-child {
            border-bottom: 1px solid #000;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        .nav > li:first-child {

            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        li {
            list-style: none;
            text-align: center;
        }

        .nav > li > span {
            display: inline-block;
            width: 32px;
            height: 32px;
            position: absolute;
            right: 10px;
            top: 5px;
        }

        .sub > li {
            background: plum;
            border: 1px solid white;
        }

        .sub > li:hover {
            background: red;
        }

        .sub {
            display: none;
        }

        .nav > .current > span {
            transform: rotate(90deg);
        }
    </style>
    <title>Title</title>
    <script src="WEB-INF/js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //1,监听一级菜单点击事件
            $(".nav>li").click(function () {
                //拿到二级菜单
                var $sub = $(this).children(".sub");
                //展开
                $sub.slideDown(1000);
                //拿到所有非当前的二级菜单
                var $othersub = $(this).siblings().children(".sub");
                $othersub.slideUp(1000);
                //让所有非当前二级菜单缩
                //
                $(this).addClass("current");
                //还原
                $(this).siblings().removeClass("current")
            })
        });

    </script>

</head>
<body>
<ul class="nav">
    <li>一级菜单<span> > </span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单<span> > </span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单<span> > </span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单<span> > </span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单<span> > </span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单<span> > </span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单<span> > </span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单<span> > </span>
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
</ul>


</body>
</html>
bootstrap+jquery+css折叠菜单 收缩菜单 效果（只有两级菜单）
bkuangb的博客
08-17 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta name=
HTML折叠菜单
热门推荐
rnaissance的博客
05-24 3万+
<html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> var itemHeight = 40; var dividerHeight = 1;function openMenu(obj) { menuTitleId = obj.i
HTML jquery实现左侧菜单折叠
01-17
HTML jquery实现左侧菜单折叠，简单易学，适合新手。。。
WEB HTML 二级菜单 折叠展开菜单
小西瓜吖的博客
03-16 1万+
WEB，HTML，二级菜单，折叠展开 一、效果图： 二、完整代码： 直接复制 浏览器打开即可。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>菜单</title> <!-- JS --> <script language="javascript"&g
html中为div添加展开与收起功能（div折叠）
最新发布
scimence的专栏
09-23 576
2、添加展开收起按钮div (i为图标，可自行修改)3、添加js代码响应逻辑。
html折叠菜单jq,基于jQuery实现简单的折叠菜单效果
weixin_32420193的博客
06-02 511
本文实例讲述了JQuery实现简单的折叠菜单效果代码。分享给大家供大家参考。具体如下：运行效果截图如下：Html代码如下：菜单一111111111111菜单二222222222222菜单三333333333333插件实现代码如下：(function ($) {$.fn.Fold = function (options) {//默认参数设置var settings = {speed: 300 //折...
JQuery 简单实现折叠菜单
weixin_33836874的博客
09-14 132
利用JQUERY简单的实现功能菜单的折叠效果。本人初学，写后台稍多一点，很少写前台的效果。还请大虾们多多指教。 菜单为二级，初始化时为折叠效果，单击大项标题时展开，显示二级列表。 HTML代码如下： 代码 &lt;body&gt;    &lt;div class="mainleftFAQ"&gt;        &lt;div class="category"&gt;        ...
html简单的折叠菜单
zhuxian2009的专栏
08-01 1万+
大道至简。html+css+一个简单的JavaScript函数，实现的折叠菜单。 功能： 1.鼠标放置在菜单选项，具有变化； 2.实现一级菜单，二级菜单； 3.一级菜单收起来时，前面是“+”，展开时，前面是“-”； 效果图： 直接贴贴贴代码： zhedie_menu.html <html> <head> <meta http-equiv="C...
html折叠菜单jq,CSS+jQuery实现简单的折叠菜单
weixin_39929646的博客
06-02 198
废话不多说了，直接给大家贴代码了，具体代码如下所示：折叠菜单body{background:grey;font-family:Microsoft Yahei;color:white;}.types a{text-decoration:none;color:white;}.types ul{display:none;}.files ul{display:none;}$(document).ready...
jQuery+CSS3+HTML5折叠卡片式下拉菜单特效
06-05
**jQuery+CSS3+HTML5折叠卡片式下拉菜单特效详解** 在网页设计中，下拉菜单是一种常见的交互元素，用于展示多级导航结构。本特效利用jQuery的事件处理、DOM操作，结合CSS3的动画效果和HTML5的新特性，构建出一种...
CSS+jQuery实现简单的折叠菜单
10-20
总结来说，使用CSS和jQuery实现折叠菜单是一个基础但实用的前端开发技能，它涉及到HTML的结构设计、CSS的样式布局以及jQuery的事件处理等多个方面的知识。这种菜单不仅在网页设计中广泛使用，而且对于学习JavaScript...
纯js+html菜单栏折叠，支持数据无限嵌套
12-19
数据格式支持数组形式 list = [ { id: 1, name: '测试', children: [ { id: 11, name: '测试1', children: [ { id: 112, name: 'cs1' } ] }, { id: 12, name: '测试2' } ] }]
HTML制作折叠菜单_有+-号,一级二级菜单.zip
01-10
HTML制作折叠多级菜单_有+-号,一级二级菜单.zip
Javascript、Css、Html下拉式折叠菜单
03-20
采用Javascript 、Css、Html脚本经典的折叠下拉式菜单。在此供大家参考，若有不足之处希望高手指点！
jquery实现折叠菜单效果【推荐】
10-20
本文主要介绍了jquery实现折叠菜单效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧
手机网页优化：CSS3+jQuery折叠导航菜单实例与实现
本文将详细介绍如何利用CSS3和jQuery技术来创建一款适合手机网页的可折叠导航菜单。这款导航菜单设计巧妙，用户可以通过点击列表图标展示或隐藏菜单，单击时以动画形式实现平滑的切换效果。这种简洁而实用的设计在...
html展开折叠菜单,纯CSS竖向滑动展开折叠菜单
weixin_42117267的博客
05-31 1459
纯CSS竖向滑动可折叠菜单-www.mb5u.com#dlmenu {height:10em;}#menu {list-style-type:none; margin:0 0 10px; padding:0; position:absolute; width:15em; background:#fff; z-index:100;}#menu li {display:block; padding:0...
点击折叠菜单（HTML/CSS/JS）
weixin_52120405的博客
03-09 2817
HTML <ul class="menu"> <li> <h3>HTML</h3> <p>超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分、和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。</p> </li> <li>
HTML简单的折叠菜单实现
aixuan5685的专栏
10-28 826
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style>div{font-size:12px;color:red; background-color: #E...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值