Question

我正在尝试在导航栏中创建搜索表单。我想在导航栏中放一个小放大镜符号，当你按下符号时，搜索表格就会下拉（就像这个网站 - http://goodlife.fuelthemes.net）。我添加了一个搜索表单和一个图标但是我无法从图标向下滑动搜索表单。有没有人有任何解决方案？提前谢谢。

searchform.php＆amp; CSS

#ht-masthead .search-field {
  background-color: transparent;
  background-image: url(images/search-icon.png);
  background-position: 5px center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  border: none;
  cursor: pointer;
  height: 37px;
  margin: 3px 0;
  padding: 0 0 0 34px;
  position: relative;
  -webkit-transition: width 400ms ease, background 400ms ease;
  transition: width 400ms ease, background 400ms ease;
  width: 230px;
}

#ht-masthead .search-field:focus {
  background-color: #fff;
  border: 2px solid #c3c0ab;
  cursor: text;
  outline: 0;
}
#ht-masthead .search-form {
  display: none;
  position: absolute;
  right: 200px;
  top: 200px;
}
.search-toggle:hover #ht-masthead .search-form {
  display: block;
}
.search-form
    .search-submit {
  display: none;
}

<div class="search-field">
</div>
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
  <label>
    <span class="screen-reader-text">Search for:</span>
    <input type="search" class="" placeholder="Search …" value="" name="s" title="Search for:" />
    </label>
  <input type="submit" class="search-submit" value="Search" />
</form>

Answer 1

您可以向标签添加单击事件处理程序，以切换输入的显示/位置。我还将输入移到了标签之外，并给它一个连接它们的for/id对。

＆＃13;

document.getElementById("search-label").addEventListener("click", function(e) {
  if (e.target == this) {
    e.preventDefault();
    this.classList.toggle("clicked");
  }
});

＆＃13;

#ht-masthead .search-field {
  background-color: transparent;
  background-image: url(images/search-icon.png);
  background-position: 5px center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  border: none;
  cursor: pointer;
  height: 37px;
  margin: 3px 0;
  padding: 0 0 0 34px;
  position: relative;
  -webkit-transition: width 400ms ease, background 400ms ease;
  transition: width 400ms ease, background 400ms ease;
  width: 230px;
}

#ht-masthead .search-field:focus {
  background-color: #fff;
  border: 2px solid #c3c0ab;
  cursor: text;
  outline: 0;
}
#ht-masthead .search-form {
  display: none;
  position: absolute;
  right: 200px;
  top: 200px;
}
.search-toggle:hover #ht-masthead .search-form {
  display: block;
}
.search-form
    .search-submit {
  display: none;
}

.search-form {
  position: relative;
}

.search-form label {
  position: relative;
  background: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-search-strong-128.png') 0 0 no-repeat;
  background-size: cover;
  width: 50px; height: 50px;
  text-indent: 9999px;
  overflow: hidden;
  white-space: nowrap;
}

.search-input {
  transform: translateY(-100%);
  opacity: 0;
  position: absolute;
  top: 100%;
  transition: opacity .25s, transform .25s;
  left: 0;
  z-index: -1;
  border: 0;
  outline: 0;
  
}
.search-label, .search-input {
  background: #ccc;
  padding: .5em;
  display: inline-block;
}

.clicked + .search-input {
  opacity: 1;
  transform: translateY(0);
}

＆＃13;

<div class="search-field">
</div>
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
  <label for="search-input" id="search-label" class="search-label">
    Search for:   
    </label>
<input id="search-input" type="search" class="search-input" placeholder="Search …" value="" name="s" title="Search for:" />
  <input type="submit" class="search-submit" value="Search" />
</form>

＆＃13;

Answer 2

您可以将JQuery gitlab_rails['manage_backup_path'] = true gitlab_rails['backup_path'] = "/var/opt/gitlab/backups" gitlab_rails['backup_archive_permissions'] = 0644 # See: http://doc.gitlab.com/ce/raketasks/backup_restore.html#backup-archive-permissions gitlab_rails['backup_pg_schema'] = 'public' gitlab_rails['backup_keep_time'] = 604800 gitlab_rails['backup_upload_connection'] = { 'provider' => 'AWS', 'region' => 'us-east-1', 'aws_access_key_id' => 'ABCDEF', 'aws_secret_access_key' => 'XYZAL' } gitlab_rails['backup_upload_remote_directory'] = 'my_gitlab_bucket_backup'用于此

.slideToggle()

$('.search-field').click(function() {
  $(this).next('.search-form').slideToggle();
});

#ht-masthead .search-field {
  background-color: transparent;
  background-image: url(images/search-icon.png);
  background-position: 5px center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  border: none;
  cursor: pointer;
  height: 37px;
  margin: 3px 0;
  padding: 0 0 0 34px;
  position: relative;
  -webkit-transition: width 400ms ease, background 400ms ease;
  transition: width 400ms ease, background 400ms ease;
  width: 230px;
}
#ht-masthead .search-field:focus {
  background-color: #fff;
  border: 2px solid #c3c0ab;
  cursor: text;
  outline: 0;
}
.search-field {
  border: 1px solid black;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.search-field:hover {
  background-color: black;
  color: white;
  cursor: pointer;
}
.search-form {
  border: 1px solid black;
  padding: 3px 0;
  color: white;
  background-color: black;
  display: none;
  width: 230px;
}
#ht-masthead .search-form {
  display: none;
  position: absolute;
  right: 200px;
  top: 200px;
}
.search-toggle:hover #ht-masthead .search-form {
  display: block;
}
.search-form
    .search-submit {
  display: none;
}

如何创建向下滑动的搜索表单

2 个答案: