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、如何让页面看起来有趣？

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

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