Question

我制作了搜索按钮，可以轻松显示和隐藏导航栏上的搜索栏，并且可以轻松实现，但动画无效，并且不会在控制台中显示错误。我不会写完整个html代码，这是html的示例代码。

$('.search-icon a').on("click", function(){
    $('body').addClass('show-search').children('.search-box-outer').slideDown();
    return false;
});

$('.close-search').click(function(){
    $('.search-box-outer').removeClass('show-search').slideUp();
    return false;
});

.search-box-outer {
  position: fixed;
  width: 100%;
  height: 60px;
  float: left;
  background: #fff;
  z-index: 99999999;
  left: 0;
  top: -60px;
  transition: all 0.2s ease-in;
}

.search-box {
  width: 100%;
  position: relative;
  padding-right: 60px;
}

.search-box .form-control,
.search-box .form-control:focus {
  height: 82px;
  border: 0;
  border-bottom: 1px solid #ccc;
  box-shadow: none !important;
  font-size: 24px;
  border-radius: 0;
}

.close-search {
  background-color: #fff;
  color: #000;
  width: 60px;
  height: 82px;
  float: left;
  border-bottom: 1px solid #ccc;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 24px;
  line-height: 82px;
  text-align: center;
  transition: all 0.2s ease-out;
}

.show-search .search-box-outer {
  top: 0;
  position: relative;
  z-index: 99999;
  width: 100%;
}

.search-box-outer .container {
  padding: 40;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<header>
  <nav>
    <ul>
      <li>
        <a href="home">home</a>
      </li>
      <li>
        <a href="aboutus">aboutus</a>
      </li>
      <li>
        <a href="contactus">contactus</a>
      </li>
      <li class="search-icon">
        <a href="#!">
          <i class="fa fa-search"></i>
        </a>
      </li>
    </ul>
  </nav>
</header>
<div class="search-box-outer">
  <div class="search-box">
    <form>
      <input type="text" value="" class="form-control" placeholder="Type &amp; Hit Enter to Search" />
    </form>
    <a href="#!" class="close-search">
      <i class="fa fa-close"></i></a>
  </div>
</div>

Answer 1

我在类search-box-outer和class show-search search-box-outer中将位置更改为绝对，并添加了display：none，并且它有效

jquery

$('.search-icon a').on("click", function(){
        $('body').addClass('show-search').children('.search-box-outer').slideDown();
        return false;
    });

    $('.close-search').click(function(){
        $('.search-box-outer').removeClass('show-search').slideUp();
        return false;
    });

<强> CSS

.search-box-outer{
    position:absolute; 
    width:100%; 
    height:60px; 
    float:left; 
    background:#fff; 
    z-index:99999999; 
    left:0;
    top:-60px;
    display: none!important;
}


.show-search .search-box-outer{
    top:0;
    position: absolute!important;
    z-index: 99999;
    width: 100%;
}

安慰和放松缓出动画不适用于搜索栏

1 个答案: