导读:
在某些不可避免的情况下,网站的文章可能很长。这种“超级长”的文章不但不方便阅读,也很可能令读者生厌。
怎么办?
以往的解决办法就是使用<a name="xxx">来为文章的各个部分设置一个锚。以百度新闻的帮助页面为例,我们可以看到,页面顶部有“新闻搜索介绍、使用入门……”等几个链接,点击他们就会跳转到帮助文档的各个部分,而且各部分还含有返回顶部的链接。这种设计显然方便了读者,但是缺点也很明显:文章依旧显得很长,占据了好几页的高度。
如果每一个H2都可以点击,点击后会隐藏相应的段落,再次点击会显示相应段落。如果有这样一个特效,这个问题就迎刃而解了。
当时有两个思路:
1.给每一个h2和相应段落都套上一个div,然后对div里的p执行操作。这个思路简单,但是添加了多余标签,所以需要改动文档结构。
2.一个循环和好几个判断。思路麻烦,但是可以在不改变文档结构的前提下适用于任何页面。
有思路之后,我曾经在经典论坛发帖询问这个问题,也得到了hyxw5890的解决方案,但是可能是hyxw5890没有完全理解我的意图,代码使用了第一个思路,不能适应普遍网页。下面我们就编写以上两个思路的代码实现吧。
思路一
下面给出伪代码:
<div>
<h2>隐藏后续段落</h2>
<p>被隐藏内容1</p>
<p>被隐藏内容2</p>
</div>
<script>
给<h2>绑定点击后令同div内的<p>都消失的功能
给<h2>绑定点击后显示同div内<p>的功能
</script>
可以看出,要想让代码起作用,我们需要一种刻意设计的代码结构。即每一个h2和对应p都由div包裹。如果站长想要使用这段代码就需要更改文章结构,静态页面需要一个一个修改;如果是使用CMS的话,模板的修改就几乎不可能了。因此,才有了下面这段代码。
思路二
下面这段代码则使用于所有采用“<h2><p>”结构的网页。
<script type="text/javascript">
$(function(){
$("h2").each(function(i){
var x = i + 1;// from 1
var numClass = "h2" + x;
this.className = numClass ;//the headings got their h2x className
var pSelector = "."+ numClass + "~ p"; // to select all paras after h2x
$(pSelector).attr("class",numClass);//and assign them the same className as their headings.
var hSelector = "h2." + numClass;//
var tSelector = "p." + numClass;//to select the paras to manipulate
$(hSelector).toggle( function(){ $(tSelector).not("h2").slideUp("slow") ;},function(){ $(tSelector).not("h2").slideDown("slow") ;});//end of toggle
});
});
</script>
这段代码的关键就是jQuery的each函数、selector的构造和覆盖。
使用方法
以上代码仅仅赋予了h2应有的功能,为了达到缩短文章长度的目的,我们还需要做两件事情:
1.在网页呈献给读者的时候将<p>隐藏起来。
2.让鼠标悬停在h2上的时候变成小手的标志,否则没人知道标题是可以点击的。忘了说一声,本页的h2都是可以点击的,试着点点上面的标题,看看文章可以缩到多短。
综述
这段代码依旧有局限性,它只使用与p标签。尽管在大多数情况下这已经足够了,但是对于特殊的文档来说,代码仍然需要做出必要的修改。
本文转自
http://www.orangize.cn/jquery/20070816/20.html
在某些不可避免的情况下,网站的文章可能很长。这种“超级长”的文章不但不方便阅读,也很可能令读者生厌。
怎么办?
以往的解决办法就是使用<a name="xxx">来为文章的各个部分设置一个锚。以百度新闻的帮助页面为例,我们可以看到,页面顶部有“新闻搜索介绍、使用入门……”等几个链接,点击他们就会跳转到帮助文档的各个部分,而且各部分还含有返回顶部的链接。这种设计显然方便了读者,但是缺点也很明显:文章依旧显得很长,占据了好几页的高度。
如果每一个H2都可以点击,点击后会隐藏相应的段落,再次点击会显示相应段落。如果有这样一个特效,这个问题就迎刃而解了。
当时有两个思路:
1.给每一个h2和相应段落都套上一个div,然后对div里的p执行操作。这个思路简单,但是添加了多余标签,所以需要改动文档结构。
2.一个循环和好几个判断。思路麻烦,但是可以在不改变文档结构的前提下适用于任何页面。
有思路之后,我曾经在经典论坛发帖询问这个问题,也得到了hyxw5890的解决方案,但是可能是hyxw5890没有完全理解我的意图,代码使用了第一个思路,不能适应普遍网页。下面我们就编写以上两个思路的代码实现吧。
思路一
下面给出伪代码:
<div>
<h2>隐藏后续段落</h2>
<p>被隐藏内容1</p>
<p>被隐藏内容2</p>
</div>
<script>
给<h2>绑定点击后令同div内的<p>都消失的功能
给<h2>绑定点击后显示同div内<p>的功能
</script>
可以看出,要想让代码起作用,我们需要一种刻意设计的代码结构。即每一个h2和对应p都由div包裹。如果站长想要使用这段代码就需要更改文章结构,静态页面需要一个一个修改;如果是使用CMS的话,模板的修改就几乎不可能了。因此,才有了下面这段代码。
思路二
下面这段代码则使用于所有采用“<h2><p>”结构的网页。
<script type="text/javascript">
$(function(){
$("h2").each(function(i){
var x = i + 1;// from 1
var numClass = "h2" + x;
this.className = numClass ;//the headings got their h2x className
var pSelector = "."+ numClass + "~ p"; // to select all paras after h2x
$(pSelector).attr("class",numClass);//and assign them the same className as their headings.
var hSelector = "h2." + numClass;//
var tSelector = "p." + numClass;//to select the paras to manipulate
$(hSelector).toggle( function(){ $(tSelector).not("h2").slideUp("slow") ;},function(){ $(tSelector).not("h2").slideDown("slow") ;});//end of toggle
});
});
</script>
这段代码的关键就是jQuery的each函数、selector的构造和覆盖。
使用方法
以上代码仅仅赋予了h2应有的功能,为了达到缩短文章长度的目的,我们还需要做两件事情:
1.在网页呈献给读者的时候将<p>隐藏起来。
2.让鼠标悬停在h2上的时候变成小手的标志,否则没人知道标题是可以点击的。忘了说一声,本页的h2都是可以点击的,试着点点上面的标题,看看文章可以缩到多短。
综述
这段代码依旧有局限性,它只使用与p标签。尽管在大多数情况下这已经足够了,但是对于特殊的文档来说,代码仍然需要做出必要的修改。
本文转自
http://www.orangize.cn/jquery/20070816/20.html