javascript - 原生 javascript 中的搜索栏切换

Question

我正在尝试将 jQuery 搜索切换转换为原生 JavaScript。这是代码片段

$('.header').on('click', '.search-toggle', function(e) {
  var selector = $(this).data('selector');

  $(selector).toggleClass('show').find('.search-input').focus();
  $(this).toggleClass('active');

  e.preventDefault();
});

@import url(https://fonts.googleapis.com/css?family=Roboto:400);
body {
  font-family: "Roboto", sans-serif;
}

.header {
  max-width: 720px;
  margin: 2em auto 10em;
}

.header-nav {
  position: relative;
  padding-right: 3em;
}

.header-nav:before,
.header-nav:after {
  content: "";
  display: table;
}

.header-nav:after {
  clear: both;
}

.menu {
  display: inline-block;
  float: right;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  display: inline-block;
}

.menu li a {
  color: #0097bf;
  display: block;
  padding: 10px;
  position: relative;
  transition: color 0.3s;
  text-decoration: none;
}

.search-button {
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.search-toggle {
  position: relative;
  display: block;
  height: 10px;
  width: 10px;
}

.search-toggle::before,
.search-toggle::after {
  content: "";
  position: absolute;
  display: block;
  transition: all 0.1s;
}

.search-toggle::before {
  border: 2px solid #0097bf;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  left: -2px;
  top: -2px;
}

.search-toggle::after {
  height: 2px;
  width: 7px;
  background: #0097bf;
  top: 10px;
  left: 8px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.search-toggle.active::before {
  width: 0;
  border-width: 1px;
  border-radius: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -1px;
  left: 4px;
}

.search-toggle.active::after {
  width: 12px;
  left: -1px;
  top: 4px;
}

.search-input:focus {
  outline: none;
}

#header-1 {
  border-bottom: 2px solid #0097bf;
}

#header-1 .search-box {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-height: 0;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  background-color: #0097bf;
  transition: all 0.3s;
}

#header-1 .search-box .search-input {
  width: 100%;
  height: 100%;
  padding: 0 1em;
  border: 0;
  background-color: transparent;
  opacity: 0;
  color: #fff;
}

#header-1 .search-box .search-input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.4);
}

#header-1.show .search-box {
  max-height: 40px;
}

#header-1.show .search-box .search-input {
  opacity: 1;
}

#header-2 {
  overflow: hidden;
}

#header-2 .menu li {
  opacity: 1;
  transition: opacity 0.2s 0.1s, -webkit-transform 0.3s;
  transition: transform 0.3s, opacity 0.2s 0.1s;
  transition: transform 0.3s, opacity 0.2s 0.1s, -webkit-transform 0.3s;
}

#header-2 .menu li:nth-child(1) {
  transition-delay: 0.4s;
}

#header-2 .menu li:nth-child(2) {
  transition-delay: 0.5s;
}

#header-2 .menu li:nth-child(3) {
  transition-delay: 0.6s;
}

#header-2 .menu li:nth-child(4) {
  transition-delay: 0.7s;
}

#header-2 .menu li:nth-child(5) {
  transition-delay: 0.8s;
}

#header-2 .search-box {
  position: absolute;
  left: 0;
  height: 100%;
  padding-left: 2em;
  -webkit-transform: translateX(20%);
  transform: translateX(20%);
  opacity: 0;
  transition: all 0.4s 0.3s;
}

#header-2 .search-box .search-input {
  border: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

#header-2 .search-box .search-toggle {
  width: 14px;
  height: 14px;
  padding: 0;
  position: absolute;
  left: 5px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

#header-2.show .menu li {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0;
}

#header-2.show .search-box {
  width: calc(100% - 5em);
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}

#header-3 .menu li {
  opacity: 1;
  transition: all 0.3s 0.3s;
}

#header-3 .search-box {
  position: absolute;
  right: 48px;
  height: 100%;
  width: 0;
  padding: 0;
  opacity: 0;
  transition: all 0.3s;
}

#header-3 .search-box .search-input {
  border: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

#header-3 .search-box .search-toggle {
  width: 14px;
  height: 14px;
  padding: 0;
  position: absolute;
  left: 5px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

#header-3.show .menu li {
  opacity: 0;
  transition: all 0.3s;
}

#header-3.show .menu li:nth-child(even) {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

#header-3.show .menu li:nth-child(odd) {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}

#header-3.show .search-box {
  width: calc(100% - 5em);
  opacity: 1;
  transition: all 0.3s 0.3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header-1" class="header">
  <nav class="header-nav">
    <div class="search-button">
      <a href="#" class="search-toggle" data-selector="#header-1"></a>
    </div>
    <ul class="menu">
      <li><a href="#">For Business</a></li>
      <li><a href="#">For Personal</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <form action="" class="search-box">
      <input type="text" class="text search-input" placeholder="Type here to search..." />
    </form>
  </nav>
</header>

我可以这样做吗？如果可以，我该怎么办？

提前致谢。

Answer 1

这样做:

document.querySelectorAll( '.header' ).forEach( function( item1, index1 ) {
    document.querySelectorAll( '.search-toggle' ).forEach( function( item2, index2 ) {
        item2.addEventListener( 'click', function( e ) {
            var selector = item2.dataset[ 'selector' ];

            document.querySelector( selector ).classList.toggle( 'show' );
            document.querySelector( selector + ' .search-input' ).focus();
            item2.classList.toggle( 'active' );
            e.preventDefault();
        } )
    } )
} )

@import url(https://fonts.googleapis.com/css?family=Roboto:400);
body {
  font-family: "Roboto", sans-serif;
}
.header {
  max-width: 720px;
  margin: 2em auto 10em;
}
.header-nav {
  position: relative;
  padding-right: 3em;
}
.header-nav:before,
.header-nav:after {
  content: "";
  display: table;
}
.header-nav:after {
  clear: both;
}
.menu {
  display: inline-block;
  float: right;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu li {
  display: inline-block;
}
.menu li a {
  color: #0097bf;
  display: block;
  padding: 10px;
  position: relative;
  transition: color 0.3s;
  text-decoration: none;
}
.search-button {
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.search-toggle {
  position: relative;
  display: block;
  height: 10px;
  width: 10px;
}
.search-toggle::before,
.search-toggle::after {
  content: "";
  position: absolute;
  display: block;
  transition: all 0.1s;
}
.search-toggle::before {
  border: 2px solid #0097bf;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  left: -2px;
  top: -2px;
}
.search-toggle::after {
  height: 2px;
  width: 7px;
  background: #0097bf;
  top: 10px;
  left: 8px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.search-toggle.active::before {
  width: 0;
  border-width: 1px;
  border-radius: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: -1px;
  left: 4px;
}
.search-toggle.active::after {
  width: 12px;
  left: -1px;
  top: 4px;
}
.search-input:focus {
  outline: none;
}
#header-1 {
  border-bottom: 2px solid #0097bf;
}
#header-1 .search-box {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-height: 0;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  background-color: #0097bf;
  transition: all 0.3s;
}
#header-1 .search-box .search-input {
  width: 100%;
  height: 100%;
  padding: 0 1em;
  border: 0;
  background-color: transparent;
  opacity: 0;
  color: #fff;
}
#header-1 .search-box .search-input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.4);
}
#header-1.show .search-box {
  max-height: 40px;
}
#header-1.show .search-box .search-input {
  opacity: 1;
}
#header-2 {
  overflow: hidden;
}
#header-2 .menu li {
  opacity: 1;
  transition: opacity 0.2s 0.1s, -webkit-transform 0.3s;
  transition: transform 0.3s, opacity 0.2s 0.1s;
  transition: transform 0.3s, opacity 0.2s 0.1s, -webkit-transform 0.3s;
}
#header-2 .menu li:nth-child(1) {
  transition-delay: 0.4s;
}
#header-2 .menu li:nth-child(2) {
  transition-delay: 0.5s;
}
#header-2 .menu li:nth-child(3) {
  transition-delay: 0.6s;
}
#header-2 .menu li:nth-child(4) {
  transition-delay: 0.7s;
}
#header-2 .menu li:nth-child(5) {
  transition-delay: 0.8s;
}
#header-2 .search-box {
  position: absolute;
  left: 0;
  height: 100%;
  padding-left: 2em;
  -webkit-transform: translateX(20%);
  transform: translateX(20%);
  opacity: 0;
  transition: all 0.4s 0.3s;
}
#header-2 .search-box .search-input {
  border: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}
#header-2 .search-box .search-toggle {
  width: 14px;
  height: 14px;
  padding: 0;
  position: absolute;
  left: 5px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
#header-2.show .menu li {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0;
}
#header-2.show .search-box {
  width: calc(100% - 5em);
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
}
#header-3 .menu li {
  opacity: 1;
  transition: all 0.3s 0.3s;
}
#header-3 .search-box {
  position: absolute;
  right: 48px;
  height: 100%;
  width: 0;
  padding: 0;
  opacity: 0;
  transition: all 0.3s;
}
#header-3 .search-box .search-input {
  border: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}
#header-3 .search-box .search-toggle {
  width: 14px;
  height: 14px;
  padding: 0;
  position: absolute;
  left: 5px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
#header-3.show .menu li {
  opacity: 0;
  transition: all 0.3s;
}
#header-3.show .menu li:nth-child(even) {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
#header-3.show .menu li:nth-child(odd) {
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}
#header-3.show .search-box {
  width: calc(100% - 5em);
  opacity: 1;
  transition: all 0.3s 0.3s;
}

<header id="header-1" class="header">
  <nav class="header-nav">
    <div class="search-button">
      <a href="#" class="search-toggle" data-selector="#header-1"></a>
    </div>
    <ul class="menu">
      <li><a href="#">For Business</a></li>
      <li><a href="#">For Personal</a></li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <form action="" class="search-box">
      <input type="text" class="text search-input" placeholder="Type here to search..." />
    </form>
  </nav>
</header>