jquery如何实现点击标题收缩下面的内容

jquery如何实现点击标题收缩下面的内容

一、总结

一句话总结：怎么做复杂前端任务，先把样式（最简单）做出来，然后在写js。

1、如何取jquery集合中的某个索引号的元素？

不是get()，是eq()，get(index)取得是dom对象，eq(index)取得才是jquery对象。

2、主体内容和侧边栏是怎么实现左右排版（侧边栏是怎么让它实现显示隐藏的）？

用的是width而不是margin和padding

3、js 怎么触发a标签里的href链接？

通过window的open方法跳到链接

document.location=href;这个才更好用

4、如何实现高度随文档变动？

都是window的，scrollTop+height

二、jquery如何实现点击标题收缩下面的内容

1、js中的正则是不加引号的，php中的是要加的

var s_index=null;
var s_str=this.innerHTML.trim();
s_str=s_str.replace(/[^\u4e00-\u9fa5]/gi,'');
alert(s_str);

这样是对的，如果'/[^\u4e00-\u9fa5]/gi'加引号是错的

2、如何取jquery集合中的某个索引号的元素？

不是get()，是eq()，get(index)取得是dom对象，eq(index)取得才是jquery对象。

3、测试的时候总结函数是在目录函数之后执行，那么放到cnblog里面的时候顺序也要是这样

 <!-- 一、总结折叠 -->
 <script type="text/javascript">
     $('#cnblogs_post_body h2').each(function(i){
         //1、获取索引号
         summary_index=1;
         var s_str=this.innerHTML.trim();
         s_str=s_str.replace(/[^\u4e00-\u9fa5]/gi,'');
         if(s_str=='一总结'){
             summary_index=i;
             return false;
         }
     });
     //2、将索引号对应的孩子全部放到一个总结div中去
     if(true){
         $('#cnblogs_post_body h2').eq(summary_index).nextUntil('h2').addClass('mulu_summary');
         $('#cnblogs_post_body h2').eq(summary_index).nextUntil('h2').wrapAll('<div id="mulu_summary"></div>');
         //4、设置这个div为隐藏
         $('#mulu_summary').hide();
         $('.mulu_summary').hide();
     }
     //3、给这个h2添加a标签，添加事件，并且修改里面的文字
     $('#cnblogs_post_body h2').eq(summary_index).html('一、总结（点击显示或隐藏总结内容）');
     $('#cnblogs_post_body h2').eq(summary_index).addClass("fry_summary");

     //5、写一个函数，来设置这个div为显示
     $('.fry_summary').click(function(){
         $('#mulu_summary').toggle();
         $('.mulu_summary').toggle();
     });
     //6、目录里面的链接都能让总结显示
     $("[class^='mulu']").click(function(){
         $('#mulu_summary').show();
         $('.mulu_summary').show();
     });

 </script>
 <!--END 一、总结折叠 -->

4、cnblog虽然不能有alert，但是哟一百种方法可以查看执行结果

比如把中间值addClass给某人

5、检查错误的方法是什么？

在页面查看源代码看某段结果时候出来，如果没出来，那问题一定出在这里

6、主体内容和侧边栏是怎么实现左右排版（侧边栏是怎么让它实现显示隐藏的）？

用的是width而不是margin和padding

 <script>
 $('#main').append('<div id="fry_append"><div id="fry_sidebar">侧边栏</div><hr/><div id="fry_reward">打赏</div><hr/><div id="fry_top"><a href="#_labelTop">Top</a></div></div>');
 $('#fry_sidebar').click(function(){
     if($('#sideBar').css('display')=='none'){
         $('#sideBar').css({'display':'block','width':'17%','margin-left':'3%'});
         $('#mainContent').css({'width':'80%'});
     }
     else{
         $('#sideBar').css({'display':'none'});
         $('#mainContent').css({'width':'100%'});
     }
 });
 $('#fry_top').click(function(){

 });
 $('#fry_reward').click(function(){
     $('#pay_area').toggle();
 });
 </script>

7、js 怎么触发a标签里的href链接？

通过window的open方法跳到链接

js怎么触发a标签里的href链接的方法如下：

给你的a标签取个Idjs中获取a元素对象的href连接如:var href=document.getElementById("a的Id").href;window.open(href);

用location.href=href;效果更好

document.location=href;这个才好用

$('#fry_top').click(function(){
    var href=$('#fry_top a').attr('href');
    document.href=href;
});

8、如何实现高度随文档变动？

都是window的

scrollTop+height

 $('#fry_reward').click(function(){
     var distance=$(window).scrollTop();
         distance+=$(window).height()/2;
         distance-=120;

     $('#pay_area').css({'top':distance+'px','scrollLeft':'50%'});
     $('#pay_area').toggle();
 });

9、如何让页面看起来有趣？

那些小东西可以弄不同的鲜艳的突出的颜色。

而大块内容的话我们一浅做基调。