javascript - 使用 JavaScript 在 td 中水平切换效果

Question

在我的应用程序中有母版页。其中一个内容占位符设计为

<table>
    <tr>
        <td width='170px'> -------td1
             <table>... header label</table>
        </td>
        <td width=85%>--------------td2
        </td>

我的要求是

当点击页眉标签时，td1 的宽度设置为 1%，td2 的宽度设置为 99%，页面会根据宽度自动调整。

再次点击header label时，宽度需要设置为原来的。

如何实现...

这是我目前所拥有的:

$(function () { 
    $('.style1').click(function () {
        $(".style2").slideToggle(); 
    }); 
});

<style type="text/css"> 
    .style1 { width: 182px; } 
    .style2 { width: 99%; } 
</style>

Answer 1

$(function () { $('.lblStyle').click (function () {$(".style1").slideToggle();}); });

<style type="text/css">
.style1
{
    width: 12%;
}

.lblStyle
{
    width: 99%;
}

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="center">
    <td valign="top" align="center" class="style1">
        <table border="0" cellspacing="0" cellpadding="0" style="width: 170px">
            <tr>
                <td style="width: 170px">
                    <asp:Image ID="imgHeader" runat="server" ImageUrl="~/App_Themes/RIBO/Images/logo_header.png"
                        Width="170px" Height="80px" Style="display: none;" />
                </td>
            </tr>
            <tr>
                <td class="menu_header">
                    <asp:Label ID="lblMenuHeader" runat="server" Text="" EnableTheming="false" Width="170px" />
                </td>
            </tr>
            <tr>
                <td>
                    <ul class="inner_menu">
                        <asp:Panel ID="Panel2" runat="server" Width="170px" Height="100%">
                            <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
                        </asp:Panel>
                    </ul>
                </td>
            </tr>
            <tr>
                <td style="background-image: url(../RIBO/App_Themes/RIBO/Images/hd_menu_bottom.png);
                    background-repeat: no-repeat;">
                    &nbsp;
                </td>
            </tr>
        </table>
    </td>
    <td width="95%" valign="top" align="left">
        <asp:Label ID="lbldummy" runat="server" Text="Test" CssClass="lblStyle"></asp:Label>
        <iframe runat="server" id="ifrmMainContent" name="ifrmMainContent" src="MyPage.aspx"
            frameborder="0" marginheight="10px" marginwidth="1px" style="overflow: scroll; 
            height: 800px; width: 100%; margin-left: 0px; margin-top: 0px;"></iframe>
    </td>
</tr>

我已经用上面的代码实现了。有两种风格。而不是lbldummy如何使用带有适当箭头标记的图像!(如果隐藏将显示右箭头，当要隐藏左指示箭头)。