Question

我正在制作asp.net网站。在那里有一个链接按钮（名为Landline数字）.Below有三个文本框。之后有一条水平线。

现在第一次只能看到链接按钮和水平按钮，并且看不到链接按钮的文本框。现在，如果用户点击链接按钮，则会显示下面链接按钮的文本框。然后，第一次出现在链接按钮上的水平线应该调整到它的位置，并且应该放在文本框之后。

如果用户再次点击链接按钮，则文本框应显示为false。并且水平线应显示其原始位置，该位置与链接按钮相对应。当然我能够看到文本框的可见性但是我无法理解如何动态地改变水平线的位置？

Answer 1

试试这个：

<a href="javascript:void()" onclick="toggleTextBoxes()">Toggle Text</a><br/>
<div id="divBox" style="display:none">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
    <input type="text" name="text3"/>
</div>
<hr/>
<script>
    function toggleTextBoxes()
    {
        var divBox = document.getElementById("divBox");
        divBox.style.display = (divBox.style.display.toLowerCase() == "none")?"block":"none";
    }
</script>

所以你的aspx Page就像：

<a href="javascript:void()" onclick="toggleTextBoxes()">Toggle Text</a><br/>
<div id="divBox" style="display:none">
    <asp:Textbox runat="server" id="text1"/>
    <asp:Textbox runat="server" id="text2"/>
    <asp:Textbox runat="server" id="text3"/>
</div>
<hr/>
<script>
    function toggleTextBoxes()
    {
        var divBox = document.getElementById("divBox");
        divBox.style.display = (divBox.style.display.toLowerCase() == "none")?"block":"none";
    }
</script>

Answer 2

假设你在服务器上做了更多的东西而不是显示/隐藏盒子，你需要使用“服务器端”控件，所以就在这里。

首先，使用Panel控件包装文本框，如下所示：

<asp:Panel id="pnlTextboxesPlaceholder" runat="server">
    <asp:Textbox runat="server" id="text1"/>
    <asp:Textbox runat="server" id="text2"/>
    <asp:Textbox runat="server" id="text3"/>
</asp:Panel>

现在，在后面的代码中的Page_Load事件中，通过使用以下代码使面板最初隐藏：

pnlTextboxesPlaceholder.style["display"] = "none";

下一步是“记住”面板的最后一个状态，即可见或隐藏..为此你可以使用隐藏输入：

<asp:HiddenField ID="hdnTextboxPanelState" runat="server" Value="hidden" />

现在在链接按钮点击事件中，有这样的代码：

void LandlineNumber_Click(object sender, EventArgs e)
{
    bool blnHidden = (hdnTextboxPanelState.Value == "hidden");
    pnlTextboxesPlaceholder.style["display"] = blnHidden ? "" : "none";
    hdnTextboxPanelState.Value = blnHidden ? "visible" : "hidden";
}

最后，将<hr />放在面板下方，每次都会显示在正确的位置。

如何动态更改水平线的位置？

2 个答案: