可折叠菜单代码（javascript折叠菜单）

今天给各位分享可折叠菜单代码的知识，其中也会对javascript折叠菜单进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、求一个 HTML的竖向折叠菜单 源码
• 2、怎么修改Spry可折叠菜单的Js代码可以将其变为 点击新的菜单关闭之前打开的？
• 3、折叠菜单代码

求一个 HTML的竖向折叠菜单 源码

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

title竖向的折叠菜单/title

script language = JavaScript

function showmenu(id) {

var list = document.getElementById("list"+id);

var menu = document.getElementById("menu"+id)

if (list.style.display=="none") {

document.getElementById("list"+id).style.display="block";

menu.className = "title1";

}else {

document.getElementById("list"+id).style.display="none";

menu.className = "title";

}

}

/script

style type="text/css"

!--

*{margin:0;padding:0;list-style:none;font-size:14px}

#nav{margin:10px;text-align:center;line-height:25px;width:200px;}

.title{background:#336699;color:#fff;border-bottom:1px solid #fff;cursor:pointer;}

.title1{background:#888;color:#000;border-bottom:1px solid #666;cursor:pointer;}

.content li{color:#336699;background:#ddd;border-bottom:1px solid #fff;}

--

/style

/head

body

div id="nav"

div class="title" id="menu1" onclick="showmenu('1') "网站制作/div

div id="list1" class="content" style="display:none"

ul

lidiv+css/li

li网站设计/li

li网站切图/li

/ul

/div

div class="title" id="menu2" onclick="showmenu('2')"网页代码/div

div id="list2" class="content" style="display:none"

ul

li菜单导航/li

li层和布局/li

li图片切换/li

/ul

/div

/div

/body

/html

看是你想要的吗？

怎么修改Spry可折叠菜单的Js代码可以将其变为 点击新的菜单关闭之前打开的？

你好,Spry框架中有2种折叠式面板Collapsible和Accordion.

根据你的描述你用的应该是Collapsible可折叠式面板.

要实现你说的功能需要为每个CollapsiblePanelTab增加一个点击事件,

例如div class="CollapsiblePanelTab" tabindex="0" onclick="CloseAllExcept(this)"标签/div

事件响应函数如下

function CloseAllExcept(e){

if (e!==CollapsiblePanel1) CollapsiblePanel1.close();

if (e!==CollapsiblePanel2) CollapsiblePanel2.close();

if (e!==CollapsiblePanel3) CollapsiblePanel3.close();

}

但是这并不是推荐的方法, 这里我推荐你使用另一种Spry组件: Accordion折叠式面板组. 即可实现你要求的功能.插入Accordion面板的方法和插入Collapsible面板相同.

如果调试有问题,可发站内消息给我. Spry技术交流请加我百度Hi好友.

____________________________

附第一种方法的代码:

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

title无标题文档/title

script src="../SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"/script

link href="../SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" /

/head

body

div id="CollapsiblePanel1" class="CollapsiblePanel"

div class="CollapsiblePanelTab" tabindex="0" onclick="CloseAllExcept(this)"标签/div

div class="CollapsiblePanelContent"内容/div

/div

div id="CollapsiblePanel2" class="CollapsiblePanel"

div class="CollapsiblePanelTab" tabindex="0" onclick="CloseAllExcept(this)"标签/div

div class="CollapsiblePanelContent"内容/div

/div

div id="CollapsiblePanel3" class="CollapsiblePanel"

div class="CollapsiblePanelTab" tabindex="0" onclick="CloseAllExcept(this)"标签/div

div class="CollapsiblePanelContent"内容/div

/div

script type="text/javascript"

var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");

var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2");

var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3");

function CloseAllExcept(e){

if (e!==CollapsiblePanel1) CollapsiblePanel1.close();

if (e!==CollapsiblePanel2) CollapsiblePanel2.close();

if (e!==CollapsiblePanel3) CollapsiblePanel3.close();

}

/script

/body

/html

折叠菜单代码

%@ page language="java" contentType="text/html;charset=utf-8"%

%@ taglib prefix="s" uri="/struts-tags"%

HTMLHEAD

link href="%=request.getContextPath()%/css/dtree.css" rel="stylesheet" type="text/css"

script type="text/javascript" src="%=request.getContextPath()%/js/dtree.js"/script

/HEAD

BODY bgColor=#DDF0FB leftMargin=0 topMargin=0 marginwidth="0" marginheight="0"

div class="dtree"

script type="text/javascript"

d =new dTree('d',"%=request.getContextPath()%");

s:iterator value="powerpage.list2" id="map"

s:if test="#map.URL==null"

d.add("${map.id}","${map.parent_id}","${map.name}");

/s:if

s:else

d.add("${map.id}","${map.parent_id}","${map.name }","","%=request.getContextPath()%/${map.url}","","right");

/s:else

/s:iterator

document.write(d);

/script

/div

/BODY

/HTML

关于可折叠菜单代码和javascript折叠菜单的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。