水平線の位置を動的に変更する方法は？

Question

私はasp.netのウェブサイトを作っています。その中にリンクボタン（Landline番号）があります.3つのテキストボックスがあります。その後、水平線が1本あります。

初めて、リンクボタンと水平のみが表示され、リンクボタンの下にあるテキストボックスは表示されません。 ユーザーがリンクボタンをクリックすると、リンクボタンの下にあるテキストボックスが表示されます。その後、最初にリンクボタンの下にある水平線は、その位置に合わせて調整し、テキストボックスの後に移動する必要があります。

ユーザーがクリックしてボタンをもう一度クリックすると、テキストボックスが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ページは次のようになります。あなたはボックスを表示/非表示のほかに、サーバー上でより多くのものをやっている

<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

と仮定すると、あなたはよ"サーバー側"コントロールを使う必要があります。

まず、このようなパネルコントロールにテキストボックスをラップ：

<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 />を置いて、それが正しい場所にすべての時間を表示します。