Zblog列表页全部摘要打开隐藏切换

编程开发 / , / at

如果要实现zblog文章列表内单个摘要打开隐藏功能,请参考用Javascript给Zblog文章摘要列表制作打开隐藏特效,现在实现兼有zblog列表摘要全部自动打开隐藏
1:保存以下Javascript代码为sh.js文件

//单个摘要打开隐藏功能
function showhide(id,sh){
try{
if(document.getElementById(id)){
if(document.getElementById(id).style.display=='block'){
 document.getElementById(id).style.display='none';
 sh.className="hide"
}
else{
 document.getElementById(id).style.display='block';
 sh.className="show"
}
}
}catch(e){}
}
//全部摘要打开隐藏功能,此段需要JQUERY,zblog里有JQUERY就不用管了,否则自己到网上下载一块运行
function hideshow(){
 $(".sh").each(function(){
  showhide($(this).attr("id"),$(this).prev("div"));
 });
}
$(document).ready(function(){
 $(".hideshow").each(function(){
  $(this).bind("click",hideshow);
 });
});

2:在首页或者列表页head区加入以下代码

<script language="Javascript" src="sh.js" type="text/javascript"></script>

3:找到列表模板文件b_article-multi.html
把要隐藏的部分用放在

<div class="sh" id="sh-<#article/id#>"></div>

把要放按钮的地方这样写

<div class="hide" onclick='showhide("sh-<#article/id#>",this);'></div>

4:找到页面公共模板,在要放全部摘要开启或隐藏模式按钮的地方这样写

<a href="#" class="hideshow">列表模式</a>

5:css里加一段

.sh{display:none;}

6:给出一个简单完整的示例,文章摘要列表打开隐藏特效

<script language="JavaScript" src="jquery.js" type="text/javascript"></script>
<script>
//单个摘要打开隐藏功能
function showhide(id,sh){
try{
if(document.getElementById(id)){
if(document.getElementById(id).style.display=='block'){
 document.getElementById(id).style.display='none';
 sh.className="hide"
}
else{
 document.getElementById(id).style.display='block';
 sh.className="show"
}
}
}catch(e){}
}
//全部摘要打开隐藏功能,此段需要JQUERY,zblog里有JQUERY就不用管了,否则自己到网上下载一块运行
function hideshow(){
 $(".sh").each(function(){
  showhide($(this).attr("id"),$(this).prev("div"));
 });
}
$(document).ready(function(){
 $(".hideshow").each(function(){
  $(this).bind("click",hideshow);
 });
});
</script>

<style>
.sh{display:none;}
</style>

<a href="#"> class="hideshow"全部按钮</a>
<div class="hide" onclick='showhide("sh-1",this);'>按钮1</div>
<div class="sh" id="sh-1">将被隐藏的部分1</div>
<div class="hide" onclick='showhide("sh-2",this);'>按钮2</div>
<div class="sh" id="sh-2">将被隐藏的部分2</div>

一条回应:“Zblog列表页全部摘要打开隐藏切换”

发表评论

电子邮件地址不会被公开。 必填项已用*标注