ボタンをクリックしたときに表示されるテキストボックスを作成しようとしています。しかし、ボタンをクリックすると、ページが読み込まれ、テキストボックスは表示されません。何が問題なの? type
ボタンを変更するか、preventDefault
を使用してページが読み込まれないようにする必要がありますか?ボタン上で検索テキストボックスを切り替えるクリックしない
マイコード:
$("#search-button").click(function(){
$("#search").slideToggle("slow");
});
.search-bar {
background: transparent;
border: none;
border-bottom: 1px solid #000000;
/*padding: 2px 5px;*/
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-image: none;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 50%;
background-color: #00BCD4;
color: white;
}
.btn-circle:hover{
background-color: white !important;
color: #00BCD4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav navbar-right">
<li>
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="search-bar" placeholder="Search" name="search" id="search" style="display: none;">
<div class="input-group-btn">
<button class="btn btn-default btn-circle" type="submit" id="search-button"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
</li>
</ul>
この問題で私を助けてください。検索ボタンを丸くする方法は? (今は右からのラウンドのみ)。
ありがとう
パディングで '0'を削除するだけです。6px 0;それは丸くなるでしょう。 ) –
@impregnablefiendパディングから0を取り除いた後に仕事が終わっていない –