可折叠和可扩展DIV标签 [英] Collapsible and Expandible DIV tags
问题描述
你好，
我正在创建一个需要使用可折叠和可扩展div标签的网页.
我已经为此创建了基本设置.
到目前为止，我已经对其进行了设置，以便在打开网页时具有3个div标签，首先扩展第一个div标签，然后首先折叠其他两个div标签.
您可以单击标题或图像以折叠或展开每个div标签.
我想在脚本中添加的内容是，如果打开了另一个div标签，它将关闭previiuos div标签(因此任何时候都只会打开一个div标签). Alos如果div标签已经扩展，我想更改每个标题的图像，我希望将图像更改为minus.png图像，折叠后希望将图像更改回plus.png图像.
到目前为止，这是我的编码:
Hi there,
I am creating a webpage which requires the use of collapsible and expandible div tags.
I have created the basic setup for this.
So far I have it setup so that when the webpage opens it has 3 div tags, the first div tag is expanded and the other two div tags are collapsed at first.
You can click on the title or the image to collapse or expand each div tag.
What I would like to add to my scripting it that if another div tag is opened, it will close the previiuos div tag, (so only one div tag will be open at anytime). Alos I would like to change the image for each heading if the div tag is already expanded I want the image to change to the minus.png image, when collapsed I want the image to change back to the plus.png image.
Here is my coding so far:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.hidden
{
display: none;
}
.unhidden
{
display: block;
}
h3
{
text-decoration: none;
color: #df8312;
}
a
{
text-decoration: none;
}
link
{
text-decoration: none;
}
img
{
border-style: none;
}
</style>
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
</head>
<body>
<a href="javascript:unhide('P1');"><h3><img id="divImg1" src="images/plus.png" width="15" height="15" /> Title 1</h3></a>
<div id="P1" class="unhidden">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<a href="javascript:unhide('P2');"><h3><img id="divImg2" src="images/plus.png" width="15" height="15" /> Title 2</h3></a>
<div id="P2" class="hidden">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<a href="javascript:unhide('P3');"><h3><img id="divImg3" src="images/plus.png" width="15" height="15" /> Title 3</h3></a>
<div id="P3" class="hidden">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
请为完成可折叠和可扩展div标签的此编码以及在div标签打开或关闭时更改图像提供一些帮助.
谢谢大家:-)
Could I please get some assistance with finishing this coding for collpasible and expandible div tags and also changing the image when the div tag is open or closed.
Thank you All :-)
推荐答案
为什么要做所有这些事情，而您却可以使用jQuery轻松获得所有信息?这是最简单的示例之一:
http://designgala.com/how-to-expand-collapse-toggle -div-layer-using-jquery/ [ http://en.wikipedia.org/wiki/JQuery [ http://jquery.com/ [ ^ ].
了解它:
http://docs.jquery.com/Tutorials [ http://docs.jquery.com/Tutorials:How_jQuery_Works [ http://docs.jquery.com/Main_Page [
Why doing all that while you can simply get it all using jQuery? This is one of the simplest samples:
http://designgala.com/how-to-expand-collapse-toggle-div-layer-using-jquery/[^].
See also:
http://en.wikipedia.org/wiki/JQuery[^],
http://jquery.com/[^].
Learn it:
http://docs.jquery.com/Tutorials[^],
http://docs.jquery.com/Tutorials:How_jQuery_Works[^],
http://docs.jquery.com/Main_Page[^].
Good luck,
—SA
这篇关于可折叠和可扩展DIV标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
