Question

我正在尝试制作一个当我点击按钮时应该出现的文本框。但是当我点击按钮时，页面加载并且文本框没有显示到位。可能是什么问题呢？我应该更改按钮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>

请帮我解决这个问题。以及如何使搜索按钮变圆？（现在只从右侧开始）。

三江源

Answer 1

您需要添加e.preventDefault();才能阻止页面刷新。

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

Answer 2

请试试这个。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以更改：

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

在按钮单击时切换搜索文本框不起作用

3 个答案: