求 点击展开折叠JS代码

JavaScript012

求 点击展开折叠JS代码,第1张

<SCRIPT language=javascript>

function opencat1(cat,img){

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

cat.style.display=""

img.src="Images/class2.gif"

} else {

cat.style.display="none"

img.src="Images/class1.gif"

}

}

</Script>

调用处:onclick="opencat1(cat,img)"

你没有贴出CSS与HTML部分，所以不太好说怎么通过CSS和HTML来实现。

不过可以在READY里加

$(“ul”).each(function(){

$(this).find("a").attr({"title":"展开","class":"a2"})

$(this).find("span").attr("title","展开")

$(this).slideUp(200)

})

其中$(“ul”) 可能需要你自己斟酌一下

你好,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="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=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>