慧鸿网络-小白学习建站,编程,系统必看网站

当前位置:主页 > 编程 >

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、将索引号对应的孩子全部放到一个总结p中去

if(true){

$('#cnblogs_post_body h2').eq(summary_index).nextUntil('h2').addClass('mulu_summary');

$('#cnblogs_post_body h2').eq(summary_index).nextUntil('h2').wrapAll('<p id="mulu_summary"></p>');

//3、设置这个p为隐藏

$('#mulu_summary').hide();

$('.mulu_summary').hide();

}

//4、给这个h2添加a标签,添加事件,并且修改里面的文字

$('#cnblogs_post_body h2').eq(summary_index).html('一、总结(点击显示或隐藏总结内容)');

$('#cnblogs_post_body h2').eq(summary_index).addClass("fry_summary");

 

//5、写一个函数,来设置这个p为显示

$('.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('<p id="fry_append"><p id="fry_sidebar">侧边栏</p><hr/><p id="fry_reward">打赏</p><hr/><p id="fry_top"><a href="#_labelTop">Top</a></p></p>');

$('#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();

});

如何让页面看起来有趣?

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

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

  • 上一篇:laravel7学习之无限级分类的最新实现方法
  • 下一篇:如何在asp.net core 的中间件中返回具体的页面
  • 商务合作

    • 微信公众号
    • QQ交流1群
    • 手机版访问
    站内信 官方群 客服 二维码 返回顶部