在按鈕上切換搜索文本框單擊不起作用

我正在嘗試創建一個當我單擊該按鈕時應該出現的文本框。但是當我點擊按鈕頁面加載和文本框不顯示。可能是什麼問題呢？我應該更改按鈕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>

請幫我解決這個問題。以及如何使搜索按鈕四捨五入？（現在只是從右側開始）。

三江源

來源

2016-09-06 Mannu Nayyar

只是在填充除去 '0'：6像素0;它會變成圓形的; ） –

@impregnablefiend它從刪除0刪除後沒有工作 –

您可以更改：

<div class="input-group-btn">

到：

<div class="input-group">

爲了您的JS，你需要將其包裝成文檔準備，防止默認事件：

$(function() { 
 
    $("#search-button").click(function (e) { 
 
    e.preventDefault(); 
 
    $("#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; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.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> 
 
      <div class="input-group"> 
 
       <button class="btn btn-default btn-circle" type="submit" id="search-button"><i class="fa fa-search"></i></button> 
 
      </div> 
 
     </form> 
 
    </li> 
 
</ul>

來源

2016-09-06 11:59:08 gaetanoM

它的工作原理，但出現的文本框應內聯，根據您的代碼它按下按鈕。 –

@MannuNayyar移出包含按鈕的輸入組。讓我知道。代碼段已更新。 – gaetanoM

它現在工作。 :) –

你需要爲了從清爽停止頁面添加e.preventDefault();。

$("#search-button").click(function(e){ 
    $("#search").slideToggle("slow"); 
    e.preventDefault(); 
});

來源

2016-09-06 11:13:24

請試試這個。

$(document).ready(function(){ 
 
$("#search-button").click(function(){ 
 
    $("#search").fadeIn(); 
 
$(this).parent().addClass('input-group-btn'); 
 
}); 
 
});

<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="form-control" placeholder="Search" name="search" id="search" style="display:none;"> 
 
<div> 
 
<button class="btn btn-default" type="button" id="search-button">Go <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> 
 
</div> 
 
</div> 
 
</form> 
 
</li> 
 
</ul>

來源

2016-09-06 11:17:27

在按鈕上切換搜索文本框單擊不起作用

回答

相關問題