非常简洁的仿js树形菜单

最新推荐文章于 2024-07-15 11:25:51 发布

艾-Alice

最新推荐文章于 2024-07-15 11:25:51 发布

阅读量1.2w

点赞数

分类专栏： web页面制作文章标签：仿js树形菜单 javascritp 树形简洁 js javascript

本文链接：https://blog.csdn.net/sinat_31016743/article/details/50507180

版权

本文介绍如何利用JavaScript知识，根据HTML的嵌套结构，自制一个简洁的树形菜单。作者分享了一个不依赖外部插件的实现方法，并提供了CSS样式、HTML源码和JavaScript事件的示例代码，最终展示了一个运行效果。

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

　　今天按计划，要制作完2P的web页面，其中有一页，左则目录列表需做成树型菜单结构展示，以前也做过树型菜单，但不是自己写出来的，利用了网上找到的jquery的tree插件。一般这些插件的“+”“-”符号很小巧，可我的页面设计稿上的“+”“-”做得比较大些，也不需要虚线。所以上网down了几个插件例子看，又看了一堆缺东缺西的垃圾例子后，决定用仅记得的一些jquery知识(有空我还是会继续学习的)，写一个仿js树形菜单的效果。只要处理好ul 嵌套关系，就可实现了。很简洁，但还是欢迎高手指出不当之处。以下是demo:

　　引入 jquery-1.9.1.min.js

CSS声明：

ul,li,i{ list-style:none; padding:0; margin:0; font-style:normal;}
i{ width:14px; height:14px; float:left;}
.box{ width:100%; max-width:300px; margin:0 auto;}
.nav-ml{ width:100%;}
.