• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
Hing
沉浸在技术的海洋,通过学习与讨论,只有不断的提高,才有可能去创造与实现.
博客园    首页    新随笔    联系   管理    订阅  订阅
Div+Css+JS做多个显示/隐藏内容块
相关样式:
CSS
.mainbox h3{ margin-bottom:0px; line-height:32px;height:32px;padding-left:1em;background:url(../../Images/forumbg.gif) repeat-x 0 0;font-size:13px;font-weight:700;border-bottom:1px solid #E6E7E1;border-top:4px solid #E8F0F7; border-left:1px solid #E8F0F7;border-right:1px solid #E8F0F7;}
    .mainbox{ width:880px;position:relative; margin
-left:auto; margin-right:auto; margin-bottom:5px;}
    .headactions{position:absolute;top:12px; right:24px;line
-height:1em;}
.tablelist{ width: 880px; margin
-left: auto; margin-right: auto; border:1px solid;}
     td{background:#e5f1f4;}


HTML:

Html
<div class="mainbox">
            
<span class="headactions">
                
<img id="category_CN_img" src="http://www.cnblogs.com/Images/expand.jpg" alt="展开/收起" onclick="toggle_collapse('category_CN');"/>
            
</span>
            
<h3 onclick="toggle_collapse('category_CN');">
            
<a href="#">Content</a>
            
</h3>
            
<div id="category_CN" style=" display:none;">
            
<table  class="tablelist" align="center" cellpadding="0">
                
<tr>
                    
<td>
                        Title:
                    
</td>
                    
<td colspan="3">
                        
<te:TETextBox ID="txtCSTitle" runat="server" Width="380px" MaxLength="100"></te:TETextBox>
                    
</td>
                
</tr>
                
<tr>
                    
<td>
                        Content:
                    
</td>
                    
<td colspan="3">
                        
<FCKeditorV2:FCKeditor ID="txtCSContent" runat="server" Height="350px" Width="98%">
                        
</FCKeditorV2:FCKeditor>
                    
</td>
                
</tr>
            
</table>
            
</div>
        
</div>

JS:
JS
 //显示或隐藏内容
        function toggle_collapse(objname) {
            var obj 
= $("#" + objname);
            
if (obj) {
                obj.slideToggle(
"2000");
            }
            var img 
= $("#" + objname + '_img');
            
if (img) {
                
if (img.attr("src") == "http://www.cnblogs.com/Images/collapse.jpg") {
                    img.attr(
"src", "http://www.cnblogs.com/Images/expand.jpg");
                    img.attr(
"title", "expand");

                }
                
else {
                    img.attr(
"src", "http://www.cnblogs.com/Images/collapse.jpg");
                    img.attr(
"title", "collapse");
                    img.attr(
"title", "collapse");

                }
            }

        }

注:要引入jQuery包,我引入的是jquery-1.3.2.min.js


posted on 2009-09-23 15:10  Pacer  阅读(881)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3