如何顯示/隱藏輸入類型：單擊按鈕時的文本

Question

回復按鈕

<div id="replybutton" class="btn4 like" style="margin-top:-25px;margin-left:-10px;">
   <span class="btn reply" id="replyb">Reply</span> 
</div>

輸入字段

<div  class="col-lg-12" style="background:#eff9c7;">
    <input type="text"  id="reply" class="form-control pull-right" style="width:88%;height:25px;margin-top:-10px;" placeholder="Write a reply..." />
</div>

所以我在這里嘗試做的是當我重新加載頁面時，輸入字段應該被隱藏，當我點擊回復按鈕它將顯示..當我再次點擊它將隱藏..我嘗試在jquery上使用toggle()它的工作原理，但問題是，如果我重新加載頁面的按鈕可見這是不正確的事情..我甚至試圖用.show()和.hide()但似乎我在想念着東西，所以它不工作的我的結局。 有什么方法可以讓它發生，當我重新加載頁面時，輸入字段應該被隱藏..

Answer 1

使用以下代碼段：

記住初始狀態應該是hidden style="display:none;"

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="replybutton" class="btn4 like"> <span class="btn reply" id="replyb" onClick="$('#reply').toggle();">Reply</span> </div> <input type="text" id="reply" class="form-control pull-right" placeholder="Write a reply..." style="display:none;"/> 

您還可以使用單擊偵聽器方法：

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="replybutton" class="btn4 like"> <span class="btn reply" id="replyb">Reply</span> </div> <input type="text" id="reply" class="form-control pull-right" placeholder="Write a reply..." style="display:none;"/> <script> $(document).ready(function(){ $('#replyb').click(function(){ $('#reply').toggle(); }); }); </script> 

Answer 2

 $('#replybutton').click(function() { $('#reply').toggle() }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="replybutton" class="btn4 like" style=""> <span class="btn reply" id="replyb">Reply</span> </div> <div class="col-lg-12" style="background:#eff9c7;"> <input type="text" id="reply" class="form-control pull-right" style="width:88%;height:25px;margin-top:0px;" placeholder="Write a reply..." hidden /> </div> 

Answer 3

嘗試使用像：

<script>
$(document).ready(function(){
  $('#replyb').click(function(){
    $('#reply').toggle();
  });
});
</script>

Answer 4

您可以使用：

style='visibility:hidden'或style='display:none '。

$('#replyb').click(function() {
  $('#reply').toggle()
})