利用jQuery让标题控制段落的显示

导读:
  在某些不可避免的情况下,网站的文章可能很长。这种“超级长”的文章不但不方便阅读,也很可能令读者生厌。
   怎么办?
  以往的解决办法就是使用<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  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值