如何显示/隐藏输入类型：单击按钮时的文本

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()
})