js树形菜单（div+css问题 js树形菜单展开变成减号闭合是加号怎么实现的）

：暂无数据 2026-07-27 15:40:05 ：1

大家好,今天小编来为大家解答以下的问题，关于js树形菜单，div+css问题 js树形菜单展开变成减号闭合是加号怎么实现的这个很多人还不知道，现在让我们一起来看看吧！

本文目录

div+css问题 js树形菜单展开变成减号闭合是加号怎么实现的
vue如何点击文件夹展开相应的树形菜单

div+css问题 js树形菜单展开变成减号闭合是加号怎么实现的

前几天用非常规方法实现了一个山寨版树形菜单。。。如下。。。《!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"》
《html》
《head》

《title》《/title》

***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
《script type="text/javascript"》
function display(jia,zi) {
if(document.getElementById(jia).innerHTML== ’+’){
document.getElementById(zi).style.display="";
document.getElementById(jia).innerHTML= ’-’;
return;
}

if(document.getElementById(jia).innerHTML== ’-’){
document.getElementById(zi).style.display= ’none’;
document.getElementById(jia).innerHTML= ’+’;
return;
}
}
function exit(){

//window.location.href=’../ht.jsp’;
//alert(’您已安全退出’);
}
《/script》
《style type="text/css"》
.juli{margin-top:20px;《br》 border:none;《br》 }

.neijuli{
padding-top:8px;
line-height:1.5em;
font-size:23px;
}

.fuhao { border:1px solid white;
color:#FFFFFF;
}

body {
background-color: #7A99E0;
font-size:25px;
}

.txtc{color:#FFFFFF}

.smalltxt{font-size:17px}
a{text-decoration:none;}
《/style》《/head》

《body》
《div class="smalltxt txtc" style="margin-bottom:30px"》
系统后台管理面板
《/div》《!--开始部分===================================== --》
《span class="smalltxt txtc"》《a href="admin/loginout.jsp" target="_top" style="color:white"》《/a》《/span》《!-- 商品管理开始================================ --》
《div id="sp" name="sp" class="juli"》
《span id="jia" class="fuhao" 》+《/span》
《a style="cursor:hand" onClick="display(’jia’,’zi’)" class="txtc"》商品管理《/a》
《!-- 子菜单 --》
《div id="zi" name="zi" class="neijuli" style="display:none"》
《a href="admin/addpro.jsp" target="mainFrame"》添加商品《/a》《br》
《a href="admin/controlpro.jsp" target="mainFrame"》管理商品《/a》
《/div》
《/div》
《hr class="txtc"》《!--新闻管理开始================================= --》
《div id="xw" name="xw" class="juli" 》
《span id="jia1" class="fuhao"》+《/span》
《a style="cursor:hand" onClick="display(’jia1’,’zi1’)" class="txtc"》新闻管理《/a》
《!-- 子菜单 --》
《div id="zi1" class="neijuli" style="display:none"》
《a href="admin/addnews.jsp" target="mainFrame"》添加新闻《/a》《br》
《a href="admin/controlnews.jsp" target="mainFrame"》管理新闻《/a》
《/div》
《/div》
《hr class="txtc"》《!--留言管理开始================================== --》
《div id="ly" name="ly" class="juli"》
《span id="jia2" class="fuhao"》+《/span》
《a style="cursor:hand" onClick="display(’jia2’,’zi2’)" class="txtc"》系统管理《/a》
《!-- 子菜单 --》
《div id="zi2" class="neijuli" style="display:none"》
《a href="#"》关闭系统《/a》《br》
《a href="#"》XXX《/a》
《/div》
《/div》
《hr class="txtc"》

《/body》
《/html》

vue如何点击文件夹展开相应的树形菜单

最近看了 Vue.js 的递归组件，实现了一个最基本的树形菜单。

项目结构：

main.js 作为入口，很简单：

1234567import Vue from ’vue’Vue.config.debug = trueimport main from ’./components/main.vue’new Vue({ el: ’#app’, render: h =》 h(main)})

它引入了一个组件 main.vue：

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990《template》《div class="tree-menu"》《ul v-for="menuItem in theModel"》《my-tree :model="menuItem"》《/my-tree》《/ul》《/div》《/template》《script》var myData = ;import myTree from ’./common/treeMenu.vue’export default { components: { myTree }, data() { return { theModel: myData } }}《/script》

该文件引入了树形组件 treeMenu.vue：

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960《template》《li》《span @click="toggle"》《i v-if="isFolder" class="icon" :class=", data() { return { open: false, isFolder: true } }, computed: { isFolder: function() { return this.model.children && this.model.children.length } }, methods: { toggle: function() { if (this.isFolder) { this.open = !this.open } } }}《/script》《style》ul { list-style: none;}i.icon { display: inline-block; width: 15px; height: 15px; background-repeat: no-repeat; vertical-align: middle;}.icon.folder { background-image: url(/src/assets/folder.png);}.icon.folder-open { background-image: url(/src/assets/folder-open.png);}.icon.file-text { background-image: url(/src/assets/file-text.png);}.tree-menu li { line-height: 1.5;}《/style》

就这么简单。这篇文章还真没什么可写的，权当记录吧。

截图效果如下：

关于js树形菜单和div+css问题 js树形菜单展开变成减号闭合是加号怎么实现的的介绍到此就结束了，不知道你从中找到你需要的信息了吗？如果你还想了解更多这方面的信息，记得收藏关注本站。

js树形菜单（div+css问题 js树形菜单展开变成减号闭合是加号怎么实现的）