可折叠内容？ [英] Collapsible Content?
问题描述
有人可以指示我支持使用
可折叠内容的文档或来源，这些内容在页面加载时默认折叠了吗？
次要目标是当然是跨浏览器支持。对于IE
（5-6）和从Mozilla派生的浏览器（各不相同）。谢谢...
<％= Clinton Gallagher
Can somebody direct me to documents or source that supports the use of
collapsible content that is collapsed by default when the page is loaded?
The secondary objective would of course be cross-browser support.for IE
(5-6) and browsers derived from Mozilla (varies). Thank you...
<%= Clinton Gallagher
推荐答案
clintonG写道：
clintonG wrote:
有人可以指示我支持使用
可折叠内容的文档或来源，这些内容在页面加载时默认折叠吗？
次要目标当然是跨浏览器支持.for IE
（5-6）和从Mozilla派生的浏览器（各种各样）。谢谢......
Can somebody direct me to documents or source that supports the use of
collapsible content that is collapsed by default when the page is loaded?
The secondary objective would of course be cross-browser support.for IE
(5-6) and browsers derived from Mozilla (varies). Thank you...
按照你的要求行事相当容易，但要做得恰到好处
需要一点点思考。 br />
制作内容默认情况下折叠可以通过两种方式实现 -
简单的方法是将折叠的显示属性设为
位''无'，然后使用JavaScript将其设置为'' ''，但是这个
的方法是有缺陷的。
如果内容要由JS公布，那么更好的想法是
默认情况下可以看到内容，然后在页面加载时用JavaScript隐藏它
。这样，如果用户的JavaScript被禁用或者他们的浏览器不支持它们，他们仍然可以使用
你的页面。
您可以使初始隐藏功能运行onload，但是如果
在页面中加载了相当多的内容，那么
onload运行时，用户将看到显示的div，然后
隐藏。所以把它放在div之后就崩溃了。
示例如下。
< html>< head>< title> play< ; / title>
< / head>< body>
< style type =" text / css">
.outer {border：1px solid blue; background-color：＃7777dd;
color：＃000066;填充：5px;}
.inner {border：1px solid blue; background-color：#eeeeff;
颜色：＃333366;}
< / style>
< script type =" text / javascript">
函数toggleDisplay（x）{
if（x.style）{
if（x.style.display = =''''）{
x.style.display =''无''
}其他{
x.style.display ='''';
}
}
}
< / script>
< / head>< body>
< div class =" external">< span onclick ="
toggleDisplay（this.nextSibling）;">点击显示/隐藏
内容< / span>< div class =" inner">这是内容
这是当前内容这里是内容这里是内容
这里是内容这里是内容这里是内容
这里是内容这里是这里是内容
这里是内容这里是内容这里是内容
这里是内容这里是内容这里是内容
这里是内容这里是内容这里是内容
< / div>< / div>
< script type =" text / javascript">
if（document.getElementsByTagName）{
var divs = document.getElementsByTagName（''div''）;
} else if（document.all）{
var divs = document.all.tags（''DIV'' ）;
}
for（var i = 0，len = divs.length; I< LEN; i ++）{
if（divs [i] .style&& divs [i] .className ==''inner''）{
divs [i] .style.display =''none'';
}
}
< / script>
< / body>< / html>
-
Rob
Doing what you ask is fairly easy, however to do it properly
will requires a bit of thought.
Making content "collapsed by default" can be achieved two ways -
the simple way is to make the display property of the collapsed
bits ''none'', then use JavaScript to set it to '''', but this
approach is flawed.
If content is to be revealed by JS, then a better idea is to
have content visible by default, then hide it with JavaScript
when the page loads. That way, if the user''s JavaScript is
disabled or their browser doesn''t support it, they can still use
your page.
You can make the initial hide function run onload, however if
there is a fair bit of content to load in your page before
the onload runs, the user will see the divs displayed, then
hidden. So put it just after the divs to collapse.
Sample below.
<html><head><title>play</title>
</head><body>
<style type="text/css">
.outer {border: 1px solid blue; background-color: #7777dd;
color: #000066; padding: 5px;}
.inner {border: 1px solid blue; background-color: #eeeeff;
color: #333366;}
</style>
<script type="text/javascript">
function toggleDisplay(x) {
if (x.style) {
if (x.style.display == '''') {
x.style.display=''none''
} else {
x.style.display='''';
}
}
}
</script>
</head><body>
<div class="outer"><span onclick="
toggleDisplay(this.nextSibling);">Click to display/hide
content</span><div class="inner">Here is the content
Here is the content Here is the content Here is the content
Here is the content Here is the content Here is the content
Here is the content Here is the content Here is the content
Here is the content Here is the content Here is the content
Here is the content Here is the content Here is the content
Here is the content Here is the content Here is the content
</div></div>
<script type="text/javascript">
if (document.getElementsByTagName){
var divs = document.getElementsByTagName(''div'');
} else if (document.all) {
var divs = document.all.tags(''DIV'');
}
for (var i=0, len=divs.length; i<len; i++){
if (divs[i].style && divs[i].className == ''inner'') {
divs[i].style.display = ''none'';
}
}
</script>
</body></html>
--
Rob
" RobG" < RG *** @ iinet.net.auau>在消息中写道
新闻：oY ***************** @ news.optus.net.au ...
"RobG" <rg***@iinet.net.auau> wrote in message
news:oY*****************@news.optus.net.au...
clintonG写道：
clintonG wrote:
有人可以指示我支持使用
可折叠内容的文件或来源，当页面加载
时默认折叠？次要目标当然是跨浏览器支持。对于IE
（5-6）和从Mozilla派生的浏览器（各种各样）。谢谢......
做你要求的事情相当容易，但要做得恰当
需要一点点思考。
制作内容默认情况下折叠可以通过两种方式实现 -
简单的方法是使折叠的显示属性无，然后使用JavaScript将其设置为''''，但是这个方法存在缺陷。
如果要通过JS显示内容，那么更好的想法是默认情况下可以看到内容，然后在页面中隐藏它
负载。这样，如果用户的JavaScript被禁用或者他们的浏览器不支持它，他们仍然可以使用你的页面。
你可以做出初始隐藏函数run onload，但是如果
onload运行之前在页面中加载了相当多的内容，用户将看到div显示，然后隐藏。所以把它放在div之后就崩溃了。
以下示例。
< html>< head>< title> play< / title>
Can somebody direct me to documents or source that supports the use of
collapsible content that is collapsed by default when the page is loaded? The secondary objective would of course be cross-browser support.for IE
(5-6) and browsers derived from Mozilla (varies). Thank you...
Doing what you ask is fairly easy, however to do it properly
will requires a bit of thought.
Making content "collapsed by default" can be achieved two ways -
the simple way is to make the display property of the collapsed
bits ''none'', then use JavaScript to set it to '''', but this
approach is flawed.
If content is to be revealed by JS, then a better idea is to
have content visible by default, then hide it with JavaScript
when the page loads. That way, if the user''s JavaScript is
disabled or their browser doesn''t support it, they can still use
your page.
You can make the initial hide function run onload, however if
there is a fair bit of content to load in your page before
the onload runs, the user will see the divs displayed, then
hidden. So put it just after the divs to collapse.
Sample below.
<html><head><title>play</title>
/ * REDUNDANT ELEMENTS * /< / head>< body>
/ * REDUNDANT ELEMENTS * /< style type =" text / css">
.outer {border：1px solid blue; background-color：＃7777dd;
颜色：＃000066;填充：5px;}
.inner {border：1px solid blue; background-color：#eeeeff;
颜色：＃333366;}
< / style>
< script type =" text / javascript">
function toggleDisplay（ x）{
if（x.style）{
if（x.style.display ==''''）{
x.style.display =''none''
} else {
x.style.display ='''';
}
}
}
< / script>
< / head>< body>
< div class =" external">< span onclick ="
toggleDisplay（this.nextSibling）;">点击进入显示/隐藏
内容< / span>< div class =" inner">这里是内容
这里是内容这里是内容这里是内容
这里是内容这里是内容这里是内容
这里是内容这里是内容这里是内容
这里是内容这里是内容这里是内容
这里是这里的内容是内容这里是内容
这里是内容这里是内容这里是内容
< / div>< / div>
< script type =" ; text / javascript">
if（document.getElementsByTagName）{
var divs = document.getElementsByTagName（''div''）;
} else if（document.all）{< （= {var i = 0，len = divs.length; I< LEN; i ++）{
if（divs [i] .style&& divs [i] .className ==''inner''）{
divs [i] .style.display =''none '';
}
}
< / script>
< / body>< / html>
-
Rob
/* REDUNDANT ELEMENTS */ </head><body>
/* REDUNDANT ELEMENTS */ <style type="text/css">
.outer {border: 1px solid blue; background-color: #7777dd;
color: #000066; padding: 5px;}
.inner {border: 1px solid blue; background-color: #eeeeff;
color: #333366;}
</style>
<script type="text/javascript">
function toggleDisplay(x) {
if (x.style) {
if (x.style.display == '''') {
x.style.display=''none''
} else {
x.style.display='''';
}
}
}
</script>
</head><body>
<div class="outer"><span onclick="
toggleDisplay(this.nextSibling);">Click to display/hide
content</span><div class="inner">Here is the content
Here is the content Here is the content Here is the content
Here is the content Here is the content Here is the content
Here is the content Here is the content Here is the content
Here is the content Here is the content Here is the content
Here is the content Here is the content Here is the content
Here is the content Here is the content Here is the content
</div></div>
<script type="text/javascript">
if (document.getElementsByTagName){
var divs = document.getElementsByTagName(''div'');
} else if (document.all) {
var divs = document.all.tags(''DIV'');
}
for (var i=0, len=divs.length; i<len; i++){
if (divs[i].style && divs[i].className == ''inner'') {
divs[i].style.display = ''none'';
}
}
</script>
</body></html>
--
Rob
谢谢Rob。
请注意，显示的代码包含多余的< / head>和< body>标签
我如上所示描述。
代码在FF或NS（Mozilla浏览器）中不起作用，但它非常好
与IE一起使用时几乎完全符合我的要求（特别是
与.outer和.inner课程的良好接触，所以再次感谢你。
我将花一些时间来确定哪些方法可能需要修改
以使脚本能够与Mozilla DNA一起使用
（FF / NS浏览器）到目前为止一直是一个真正的痛苦。
我还需要在内部类中使用一个iFrame来加载
a服务器端页面（aspx）为帐户登录运行向导等等，然后需要确定如果
服务器端.aspx进程完成后如何折叠this.nextSibling。评论赞赏。
我还记得读到使用''this''关键字可能会有什么问题w / b
有问题wi Mozilla的活动处理程序。我会试着稍后验证这个
晚上并希望返回结果。
<％= Clinton Gallagher
Thank you Rob.
Note the code as shown includes redundant </head> and <body> tags
which I delineate as shown above.
The code does not function in FF or NS (Mozilla browsers) but it is very
impressive when used with IE and nearly exactly what I want (especially
the nice touch with the .outer and .inner classes so thank you again.
I am going to spend some time with it to determine what methods may
need to be modified to enable the script to function with Mozilla DNA
(FF/NS browsers) which has been a real pain so far.
I also need to use an iFrame within the div the inner class which will load
a server-side page (aspx) to run wizards for account logins and such and
then will need to determine how to collapse this.nextSibling once the
server-side .aspx process has completed. Comments appreciated.
I also just recalled reading that the use of the ''this'' keyword is what may
be problematic with Mozilla''s event handlers. I''ll try to verify that later
this
evening and hope to return with results.
<%= Clinton Gallagher
clintonG写道：
[...]
clintonG wrote:
[...]
谢谢Rob。
请注意，显示的代码包含多余的< / head>和< body>标签
我描述如上所示。
错误...复制/粘贴错误。我的代码在FF或NS（Mozilla浏览器）中不起作用，但它非常
应该，我用Firefox开发然后在IE中测试。即使是带有错误头部和身体标签的
，它对我来说也适用于我所拥有的所有
浏览器。
与IE一起使用时令人印象深刻正是我想要的（特别是与.outer和.inner课程的良好接触，所以再次感谢你。
我将花一些时间来确定哪些方法可能
需要进行修改以使脚本能够与Mozilla DNA一起使用
（FF / NS浏览器）到目前为止真的很痛苦。
如果你使用MS文档和IE开发，这将是
的情况。使用Firefox / Mozilla /等。和w3c规格，你会发现，虽然你需要，但是b
$ b的问题更少这里和那里有一些技巧
支持旧的IE浏览器，也许是Netscape 4& 6.
我还需要在div中使用内部类的iFrame加载
服务器端页面（aspx）运行向导进行帐户登录等等，然后将需要确定如何折叠thi s.nextSibling一旦
服务器端.aspx进程完成。评论赞赏。
我使用nextSibling作为方便，而不是使用
getElementById或Tag方法。您需要设计HTML的结构
以适合您的模型，以便在页面上创建动态内容。
想法是在要折叠的元素之间创建一个链接，该元素将被点击。这可以用ID或元素的关系来完成（例如
nextSibling）。
使用ID需要一些解析无论是在服务器上还是在
客户端上，以确保右侧元素的链接点和所有
ID在页面中保持唯一。例如你的标题可能都有
枚举ids：id =" header-01" ..." header-02"等等以及要崩溃的
内容：id =" content-01" ..."内容-02"
当点击标题时，如果它是'id =" header-01"然后
崩溃/展开元素，id =" content-01" （参见下面的示例）
使用元素关系限制页面布局选项 -
更改布局，您的关系模型可能会中断。但是
它不依赖于唯一身份证的生成，所以你只需要点击页面上的内容就可以获得
。
我我还回忆起，阅读使用''this''关键字可能会对Mozilla的事件处理程序造成问题。我会试着稍后验证这个晚上，并希望返回结果。
Thank you Rob.
Note the code as shown includes redundant </head> and <body> tags
which I delineate as shown above.
Err... copy/paste error. I
The code does not function in FF or NS (Mozilla browsers) but it is very
It should, I develop using Firefox and then test in IE. Even
with the errant head and body tags, it works for me in all
browsers I have.
impressive when used with IE and nearly exactly what I want (especially
the nice touch with the .outer and .inner classes so thank you again.
I am going to spend some time with it to determine what methods may
need to be modified to enable the script to function with Mozilla DNA
(FF/NS browsers) which has been a real pain so far.
If you use MS documentation and IE for development, that will be
the case. Use Firefox/Mozilla/etc. and w3c specs and you''ll
have fewer issues, though you need a few tricks here and there
to support older IE browsers and maybe Netscape 4 & 6.
I also need to use an iFrame within the div the inner class which will load
a server-side page (aspx) to run wizards for account logins and such and
then will need to determine how to collapse this.nextSibling once the
server-side .aspx process has completed. Comments appreciated.
I used nextSibling as a convenience, rather than a
getElementById or Tag method. You need to design the structure
of your HTML to fit your model for creating dynamic content on
the page.
The idea is to create a link between the element that will be
clicked on with the one that will be collapsed. This can be
done with IDs or the relationship of the elements (e.g.
nextSibling).
Using ID requires some parsing either at the server or on the
client to ensure the link points at the right element and all
IDs remain unique in the page. e.g. your headings could all have
enumerated ids: id="header-01" ..."header-02", etc. and the
content to collapse: id="content-01" ..."content-02" etc.
When the header is clicked on, if it''s id="header-01" then
collapse/expand element with id="content-01" (see sample below)
Using element relationships restricts page layout options -
change the layout and your relationship model may break. But
it''s not dependent on the generation of unique IDs, so you can
just plonk the content on the page.
I also just recalled reading that the use of the ''this'' keyword is what may
be problematic with Mozilla''s event handlers. I''ll try to verify that later
this
evening and hope to return with results.
据我所知，''这在Mozilla中运行良好。 IE中的事件
模型与'zillas完全不同，但是
在这种情况下不应该引起任何问题。
如果您愿意，可以完全避免使用''this''并且只需通过
" event" - 请参阅下面的toggleDisplay0（）。如果你想得到真正的价值，你可以将toggleDisplay（）添加到所有范围内
id =" header-"在页面加载时使用JS来保存一些编码 -
保持HTML清洁。
< html>< head>< title> play< / title>
< style type =" text / css">
.outer {border：1px solid blue; background-color：＃7777dd;
color：＃000066;填充：5px;}
.inner {border：1px solid blue; background-color：#eeeeff;
color：＃333366;填充：5px;}
< / style>
< script type =" text / javascript">
//期望传递给它的元素引用
函数toggleDisplay（i）{
var cont = i.id.split（'' - ''）[ 1];
var x = document.getElementById（''content-''+ cont）;
if（x.style）{
if（x.style.display ==''''）{
x.style.display =''none''
} else {
x.style.display ='''';
}
}
}
//使用该事件查找点击的元素
函数toggleDisplay0（e）{
e = e || window.event;
var y = e.target || e.srcElement;
var n = y.id.split（'' - ''）[1];
if（document.getElementById）{
var x = document.getElementById（''content-''+ n）;
}否则if（document.al）{
var x = document.all（''content-''+ n）;
}
if（x.style）{
if（x.style.display ==''''）{
x.style.display =''none''
} else {\\ br />
x.style.display ='''';
}
}
}
< / script>
< / head>< body>
< div class =" outer">< span ID = QUOT;头-01" onclick ="
toggleDisplay（this）;">点击显示/隐藏
content 1< / span>< div class =" inner" id =" content-01">
这里是内容1这里是内容1
这里是内容1这是内容1
这里是内容1这里是内容1
这里是内容1这里是内容1
这里是内容1这里是内容1
< / div>< / div>
< div class =" external">< span id =" header- 02 QUOT; onclick ="
toggleDisplay0（event）;">点击显示/隐藏
content 2< / span>< div class =" inner" id =" content-02">
这里是内容2这里是内容2
这里是内容2这里是内容2
这里是内容2这里是内容2
这里是内容2这里是内容2
这里是内容2这里是内容2
< / div>< / div>
< script type =" text / javascript">
if（document.getElementsByTagName）{
var divs = document.getElementsByTagName（''div''）;
} else if（document.all）{
var divs = document.all.tags（''DIV''）;
}
for（var i = 0，len = divs.length ; i< len; i ++）{
if（divs [i] .style&& divs [i] .className ==''inner''）{
divs [i] .style.display =''none'';
}
}
< / script>
< / body>< / html>
-
Rob
As far as I know, ''this'' works fine in Mozilla. The event
models in IE and the ''zillas are quite different, but that
should not cause you any issues in this case.
You can avoid using ''this'' completely if you like and just pass
"event" - see toggleDisplay0() below. If you want to get really
fancy, you can add toggleDisplay() to all spans with
id="header-" using JS when the page loads to save some coding -
keeps the HTML clean.
<html><head><title>play</title>
<style type="text/css">
.outer {border: 1px solid blue; background-color: #7777dd;
color: #000066; padding: 5px;}
.inner {border: 1px solid blue; background-color: #eeeeff;
color: #333366; padding: 5px;}
</style>
<script type="text/javascript">
// Expects the element reference to be passed to it
function toggleDisplay(i) {
var cont = i.id.split(''-'')[1];
var x = document.getElementById(''content-'' + cont);
if (x.style) {
if (x.style.display == '''') {
x.style.display=''none''
} else {
x.style.display='''';
}
}
}
// Uses the event to find the element clicked on
function toggleDisplay0(e) {
e = e || window.event;
var y = e.target || e.srcElement;
var n = y.id.split(''-'')[1];
if (document.getElementById) {
var x = document.getElementById(''content-'' + n);
} else if (document.al) {
var x = document.all(''content-'' + n);
}
if (x.style) {
if (x.style.display == '''') {
x.style.display=''none''
} else {
x.style.display='''';
}
}
}
</script>
</head><body>
<div class="outer"><span id="header-01" onclick="
toggleDisplay(this);">Click to display/hide
content 1</span><div class="inner" id="content-01">
Here is the content 1 Here is the content 1
Here is the content 1 Here is the content 1
Here is the content 1 Here is the content 1
Here is the content 1 Here is the content 1
Here is the content 1 Here is the content 1
</div></div>
<div class="outer"><span id="header-02" onclick="
toggleDisplay0(event);">Click to display/hide
content 2</span><div class="inner" id="content-02">
Here is the content 2 Here is the content 2
Here is the content 2 Here is the content 2
Here is the content 2 Here is the content 2
Here is the content 2 Here is the content 2
Here is the content 2 Here is the content 2
</div></div>
<script type="text/javascript">
if (document.getElementsByTagName){
var divs = document.getElementsByTagName(''div'');
} else if (document.all) {
var divs = document.all.tags(''DIV'');
}
for (var i=0, len=divs.length; i<len; i++){
if (divs[i].style && divs[i].className == ''inner'') {
divs[i].style.display = ''none'';
}
}
</script>
</body></html>
--
Rob
这篇关于可折叠内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
