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

时间:2017-04-12 10:05:38

标签: javascript php jquery html css

回复按钮

<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>

所以我在这里尝试做的是当我重新加载页面时,输入字段应该被隐藏,当我点击回复按钮时它将显示..当我再次点击它时它将隐藏..我尝试使用{{ 1}}在jquery上它可以工作,但问题是如果我重新加载页面按钮是可见的这不是正确的事情..我甚至尝试使用toggle().show()但似乎我遗漏了一些东西所以它不能在我的最终工作。有什么方法可以让它发生,当我重新加载页面时,输入字段应该被隐藏..

4 个答案:

答案 0 :(得分:0)

使用以下代码段:

请记住初始状态应隐藏 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>

答案 1 :(得分:0)

$('#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>

答案 2 :(得分:0)

您可以使用:

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

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

答案 3 :(得分:0)

尝试使用:

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