简单的jq实现树形菜单

最近接的一个新的项目用到了树形菜单，决定跟大家分享下一个简单的树形菜单怎么实现。我也已经把它分装成jq的一个插件，里面的参数也可以根据使用自己去修改。接下来就是放代码了！

part one 样式内容

*{list-style: none;font-size: 16px;}
#wrapTree .menu-slide-sub{display: inline-block;width: 16px;height: 16px;background-image: url("../img/sub.png");/*background-position: 0 -320px;!*左右 上下*!*/line-height: 20px;/*vertical-align: middle;*/
}
#wrapTree  .tree-li-title{line-height: 20px;height: 20px;vertical-align: middle;cursor: default;}
#wrapTree  .menu-slide-add{display: inline-block;width: 16px;height: 16px;background-image: url("../img/add.png");/*background-position: 0 -304px;!*左右 上下*!*/line-height: 20px;/*vertical-align: middle;*/
}

part two HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="distTree.css">
</head>
<body>
<div id="wrapTree"><ul><li class="tree-ul-li"><span class="tree-li-title"><a class="tree-toggle menu-slide-sub" href="javascript:;" id="mianTitle"></a>存储内容</span><ul><li class="tree-ul-li"><span class="tree-li-title"><a class="tree-toggle menu-slide-sub" href="javascript:;"></a>Driver 1</span><ul><li class="tree-ul-li"><div><input type="checkbox" class="inputBox"><label>连续测试</label></div><div><input type="checkbox" class="inputBox"><label>随机测试</label></div></li><li class="tree-ul-li"><div><input type="checkbox" class="inputBox"><label>连续测试</label></div><div><input type="checkbox" class="inputBox"><label>随机测试</label></div></li></ul></li><li class="tree-ul-li"><span class="tree-li-title"><a class="tree-toggle menu-slide-sub" href="javascript:;"></a>Driver 2 </span><ul><li class="tree-ul-li"><div><input type="checkbox" class="inputBox"><label>连续测试</label></div><div><input type="checkbox" class="inputBox"><label>随机测试</label></div></li><li class="tree-ul-li"><div><input type="checkbox" class="inputBox"><label>连续测试</label></div><div><input type="checkbox" class="inputBox"><label>随机测试</label></div></li></ul></li></ul></li></ul>
</div></body>
</html>

part three JS

<script>(function ($) {$.fn.tree = function (option) {let opt = {mainTitle: "#mianTitle",toggleCls: "menu-slide-add",//改变的classbingEvent: "click",//绑定的事件};option = $.extend({}, opt, option);$("#wrapTree .tree-li-title").on(option.bingEvent, ".tree-toggle", function () {let result = $("#mianTitle").hasClass(option.toggleCls);if (result) {$(option.mainTitle).parent().next().find("ul").hide();}$(this).toggleClass(option.toggleCls).parent().next("ul").slideToggle();});return this;}})($);$(function () {$("wrapTree").tree();})
</script>

在HTML部分我们的布局首先就要实现树形的布局，树形就是一种父子节点的形式，在上面我通过<ul><li><ul><li></li></ul></li></ul>的一种ul里面包裹着li，li里面包裹着ul的形式去实现。实现页面布局以后再是脚本。先引入jq的资源，jq的封装插件的形式是用$.fn在原型链上实现继承相当于js的$.prototye。我们把方法写在jquery的原型链上。树形菜单的显示隐藏就是通过点击当前的标题，显示隐藏ul里面的内容。toggle()方法就是用与显示隐藏的切换，toggleClass(）就是实现样式类命的切换。通过on()方法做事件绑定，整个插件就完成了。

可能在这里大家会有个疑问为什么要return this，那是因为要保持jquery的链式结构，为什么它可以再引用后面的方法就是因为，返回的this，再继续调用原型链上的方法。

还有为什么要增加result的判断，那是我增加的用户体验，当一级菜单收拢以后，再打开，应该是只显示二级菜单，三级菜单是收拢的。因此做了这个判断，如果一级菜单收拢，只显示二级菜单。

这就是整个树形菜单的讲解了。

简单的jq实现树形菜单相关推荐

简单实用的二级树形菜单hovertree
原创 hovertree是一个仿京东的树形菜单jquery插件,暂时有银色和绿色两种. 官方网址:http://keleyi.com/jq/hovertree/ 欢迎下载使用查看绿色效果: http ...
树形菜单 php,简单的树形菜单_php
table {font-size = 9pt} td {height = 10px} /** * 构造树,初值为0 */ function tree(n) { var id = new Array(& ...
java ui代码实现_Java + Element-UI 实现简单的树形菜单
一.简单入门级树形菜单实现(纯后台逻辑) 1.简介 (1)开发环境 IDEA + JDK1.8 + mysql 1.8 SpringBoot 2.2.6 + mybatis-plus 此处仅后台开发( ...
elementui树状菜单tree_Java + Element-UI 实现简单的树形菜单
一.简单入门级树形菜单实现(纯后台逻辑) 1.简介 (1)开发环境 IDEA + JDK1.8 + mysql 1.8 SpringBoot 2.2.6 + mybatis-plus 此处仅后台开发( ...
微信小程序实现树形菜单其实很简单
话不多说,上代码 ➡️ 组件资源下载(想直接下载组件,可以点击下载) 创建一个名为 treeList 的组件组件代码 treeList.wxml: <view class="tre ...
ztree实现树形菜单
实现后的结果大致是这样的其具体实现过程呢如下: 首先需要引入几个js和css样式: <link href="../../ext-res/ztree/css/demo.css" ...
ActionScript 3.0 实现树形菜单。
转自:http://www.cppblog.com/twzheng/archive/2007/10/19/34598.aspx 主要2个类:给了我不少启发.打算修改成xml,并加上拖动节点,添加删除节 ...
Unity 引擎UGUI之自定义树形菜单（TreeView）
先上几张效果图: 如果你需要的也是这种效果,那你就来对地方了! 目前,我们这个树形菜单展现出来的功能如下: 1.可以动态配置数据源: 2.点击每个元素的上下文菜单按钮(也就是图中的三 ...
zTree树形菜单交互选项卡效果实现
1. 添加自定义属性 page 2. 为 ztree 每个树形节点,添加点击事件 <!DOCTYPE html> <html><head><meta char ...

简单的jq实现树形菜单

简单的jq实现树形菜单相关推荐

最新文章

热门文章