Div+Css+JS做多個顯示/隱藏內容塊

天偉發表於2009-09-27
CSSJS
相關樣式：
img_1c53668bcee393edac0d7b3b3daff1ae.gifimg_405b18b4b6584ae338e0f6ecaf736533.gifCode
.mainbox h3{ margin-bottom:0px; line-height:32px;height:32px;padding-left:1em;background:url(http://www.cnblogs.com/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：

<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：

img_1c53668bcee393edac0d7b3b3daff1ae.gifimg_405b18b4b6584ae338e0f6ecaf736533.gifCode
//顯示或隱藏內容
        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“);

                }
            }

        }


相關文章