网页制作的树形菜单默认是全部展开的，如何更改默认为折叠起来？

u010759773 2017-01-22 07:43:53
如图1打开网页菜单默认是全部展开的，我想达到图2的目的：打开网页菜单默认是折叠的。因为这个网页涉及到js和css文件，这里提问不能上传附件，请到我分享的网盘下载整个网页内容：http://pan.baidu.com/s/1hrQ174w ,请高手看一下，是修改网页代码，还是要修改js或css文件，才能达到菜单默认为折叠起来的目的？




顺便写出这个网页代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.2345.com/?k3n3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.2345.com/?k3n3">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多级树形分类折叠菜单演示</title>

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />

<link rel="stylesheet" type="text/css" href="css/style.css" />

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<script type="text/javascript">
$(function(){
$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
$('.tree li.parent_li > span').on('click', function (e) {
var children = $(this).parent('li.parent_li').find(' > ul > li');
if (children.is(":visible")) {
children.hide('fast');
$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
} else {
children.show('fast');
$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
}
e.stopPropagation();
});
});
</script>

</head>

<body>

<div class="tree">

<ul>

<li>
<span><i class="icon-minus-sign"></i>河北省</span>
<ul>
<li><a href="#@">保定市</a></li>
</ul>
</li>

<li>
<span><i class="icon-minus-sign"></i>福建省</span>
<ul>
<li><a href="#@">福州市</a></li>
<li><a href="#@">泉州市</a></li>
</ul>
</li>

<li>
<span><i class="icon-minus-sign"></i>海南省</span>
<ul>
<li><a href="#@">海口市</a></li>
<li><a href="#@">三亚市</a></li>
</ul>
</li>

<li>
<span><i class="icon-minus-sign"></i>辽宁省</span>
<ul>
<li><a href="#@">沈阳市</a></li>
</ul>
</li>

<li>
<span><i class="icon-minus-sign"></i>广东省</span>
<ul>
<li>
<span><i class="icon-minus-sign"></i>茂名市</span>
<ul>
<li><a href="#@">高州市</a></li>
<li><a href="#@">信宜市</a></li>
</ul>
</li>
</ul>
</li>

</ul>

</div>

</body>
</html>
...全文
1131 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
天际的海浪 2017-01-23
  • 打赏
  • 举报
 回复 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.2345.com/?k3n3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.2345.com/?k3n3">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多级树形分类折叠菜单演示</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />

<link rel="stylesheet" type="text/css" href="css/style.css" />

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<script type="text/javascript">
$(function(){
    $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Expand this branch');
    $('.tree li.parent_li > ul > li').hide();
    $('.tree li.parent_li > span').on('click', function (e) {
        var children = $(this).parent('li.parent_li').find(' > ul > li');
        if (children.is(":visible")) {
            children.hide('fast');
            $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
        } else {
            children.show('fast');
            $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
        }
        e.stopPropagation();
    });
});
</script>

</head>

<body>

<div class="tree">

<ul>

<li>
<span><i class="icon-plus-sign"></i>河北省</span>
<ul>
<li><a href="#@">保定市</a></li>
</ul>
</li>

<li>
<span><i class="icon-plus-sign"></i>福建省</span>
<ul>
<li><a href="#@">福州市</a></li>
<li><a href="#@">泉州市</a></li>
</ul>
</li>

<li>
<span><i class="icon-plus-sign"></i>海南省</span>
<ul>
<li><a href="#@">海口市</a></li>
<li><a href="#@">三亚市</a></li>
</ul>
</li>

<li>
<span><i class="icon-plus-sign"></i>辽宁省</span>
<ul>
<li><a href="#@">沈阳市</a></li>
</ul>
</li>

<li>
<span><i class="icon-plus-sign"></i>广东省</span>
<ul>
<li>
<span><i class="icon-plus-sign"></i>茂名市</span>
<ul>
<li><a href="#@">高州市</a></li>
<li><a href="#@">信宜市</a></li>
</ul>
</li>
</ul>
</li>

</ul>

</div>

</body>
</html>
看着是个昵称 2017-01-23
  • 打赏
  • 举报
 回复
修改js文件，直接设置下拉隐藏
看着是个昵称 2017-01-23
  • 打赏
  • 举报
 回复
引用 5 楼 u010759773 的回复:
@jslang 真不好意思，我细看了一下你修改的代码，除了</script>与</script>之间要修改外，<body>与</body>之间有个地方也要修改…… 没错，你的完全是正确的，谢谢！！ @yanluofeihong 也谢谢你，相信你的方法也可以！
改了之后，把代码发给你了
u010759773 2017-01-23
  • 打赏
  • 举报
 回复
@jslang 真不好意思，我细看了一下你修改的代码，除了</script>与</script>之间要修改外，<body>与</body>之间有个地方也要修改…… 没错，你的完全是正确的，谢谢！！ @yanluofeihong 也谢谢你，相信你的方法也可以！
u010759773 2017-01-23
  • 打赏
  • 举报
 回复
@jslang
看走眼了，原来1楼兄已经给出了答案，不好意思，
我用了你修改的代码，发现默认折叠起来了，厉害！
不过，虽然默认折叠起来了，但前面那个折叠标志变为减号的图标了，应该是加号的图标才合理......
如图，成了这样
u010759773 2017-01-23
  • 打赏
  • 举报
 回复
@yanluofeihong 我把全部内容上传到这里了http://pan.baidu.com/s/1hrQ174w ，JS文件只有一个，我用记事本打开，发现里面内容太长了，这里回复粘贴不完整，能不能劳驾去以上百度盘下载来看一下，修改好发回我邮箱223383278@qq.com
jquery树形菜单
"jquery树形菜单"是一个利用jQuery实现的交互式树形菜单组件，它提供了可折叠和收缩的功能，使得网页中的导航更加直观和用户友好。 树形菜单通常用于展示层级结构的数据，比如网站目录、文件系统或组织结构。通过...
jQuery展开收缩树形菜单代码.zip
在网页设计和开发中，树形菜单是一种常见的交互元素，用于组织和展示层次结构的数据，如网站导航、文件系统或数据库目录。`jQuery`作为一款轻量级的JavaScript库，因其简洁的API和丰富的插件生态，常被用来实现动态...
树形导航菜单
最后，压缩包内的"所有类型的树形菜单"可能包含各种实现方式的示例代码和资源，包括不同的样式、交互效果和扩展功能。开发者可以根据项目需求选择合适的实现，或者从中获取灵感并自定义自己的树形导航菜单。 总结来...
jQuery多级折叠展开树形菜单代码.zip
jQuery多级折叠展开树形菜单是一种常见的网页交互设计，它允许用户通过点击来展开或折叠树状结构的数据，常用于网站导航、数据分类展示等场景。这个压缩包中包含了一个完整的实现这一功能的jQuery代码实例。 首先，...
Unity TreeView树形菜单
在Unity项目中，TreeView常用于创建可交互的树形菜单，用户可以通过展开和折叠节点来探索和操作数据。本教程将深入探讨Unity TreeView的实现、自定义和优化。 首先，我们要理解Unity TreeView的基本结构。一个...
JavaScript

87,993

社区成员

224,694

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章