JQuery做折叠二级菜单

最新推荐文章于 2022-06-10 18:45:19 发布

丹哥不是哥

最新推荐文章于 2022-06-10 18:45:19 发布

阅读量4.1k

点赞数 2

文章标签： jquery

本文链接：https://blog.csdn.net/u010622874/article/details/51539846

版权

本文记录了使用JQuery自制折叠二级菜单的过程，作者在实现过程中遇到JS获取display属性与实际显示不符的问题，但成功完成二级菜单并计划扩展到三级菜单，目标是封装成JQuery小插件。总结了涉及的JQuery方法，如show()、addClass()等，并提供了相关API链接及代码示例。

摘要由CSDN通过智能技术生成

今天用JQuery做了一个折叠的二级菜单，以前直接用的Bootstrap插件来做，Boostrap直接封装好了，拿过来用，这次是自己手写，一边借鉴网上的优秀资源，一边自己做的。自我感觉界面交互良好。原来也没有那么难嘛！
（但是写JS的时候获取二级菜单display属性的时候，得到的结果与实际在页面显示的结果相反，不知道为啥。）
**接下来继续优化，做到三级菜单。
希望能封装成小插件，开始自己的JQuery插件库。**
知识总结：
JQuery
运用了Jquery方法有：
show()：元素的显示与隐藏；
addClass():添加一个样式类名；
removeClass();去除一个样式名；
slideToggle();滑动动画显示与隐藏；
siblings()；遍历元素并选择；
slideUp();滑动动画向上滑动

具体JQueryAPI中文文档链接：http://www.jquery123.com/
代码展示：
collapse.html:

<!DOCTYPE html>
<html>
<head>
    <title>折叠菜单</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="collapse.css">
</head>
<body>
<ul>
    <li id="first-floor">
        <a href="#" class="first-title">我是一级菜单</a>
        <ul id="second-floor">
            <li><a href="#" class="second-title">我是二级菜单</a></li>
            <li><a href="#" class="second-title">我是二级菜单</a></li>
            <li><a href="#" class="second-title">我是二级菜单</a></li>
            <li><a href="#" class="second-title">我是二级菜单</a></