表示する方法/入力タイプを隠す：テキストをボタンがクリックされたときに

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

があります：

初期状態は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

：

style='visibility:hidden'またはstyle='display:none」。

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

Answer 4

などの使用しよう：

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