点击搜索图标动态缓缓弹出一个搜索框如何实现,运用js和css

可以使用 JavaScript 在点击搜索图标时触发事件，并使用 CSS 实现搜索框的动画效果。

1. 使用 JavaScript 监听点击事件，在点击搜索图标时执行相应的函数。

const searchIcon = document.querySelector('.search-icon');
searchIcon.addEventListener('click', function() {
  // code to show search box
});

2. 使用 CSS 的 `transition` 和 `transform` 属性实现搜索框的动画效果。

.search-box {
  transition: all 0.5s ease-in-out;
  transform: scale(0);
}
.search-box.show {
  transform: scale(1);
}

3. 在 JavaScript 中，通过添加/删除 class 来控制搜索框的显示/隐藏。

const searchBox = document.querySelector('.search-box');
searchIcon.addEventListener('click', function() {
  searchBox.classList.toggle('show');
});

以上代码仅供参考，具体实现可能需要根据项目需求进行调整。

相关问题

点击搜索图标搜索框弹出

可以使用JavaScript和CSS来实现点击搜索图标时搜索框的弹出效果。首先，你可以使用JavaScript来监听搜索图标的点击事件，并在点击时执行相应的函数。例如，你可以使用以下代码来实现这个功能：

const searchIcon = document.querySelector('.search-icon');
searchIcon.addEventListener('click', function() {
  // 在这里编写显示搜索框的代码
});

在这个代码中，我们使用`querySelector`方法选择了具有`.search-icon`类的搜索图标元素，并使用`addEventListener`方法为其添加了一个点击事件监听器。当搜索图标被点击时，相应的函数将被执行。

接下来，你可以使用CSS来实现搜索框的动画效果。你可以使用过渡或动画属性来实现搜索框的弹出效果。例如，你可以为搜索框添加一个过渡效果，使其在显示时具有平滑的动画效果。以下是一个示例CSS代码：

.search-box {
  /* 设置搜索框的初始状态 */
  height: 0;
  opacity: 0;
  transition: height 0.3s, opacity 0.3s;
}

.search-box.show {
  /* 设置搜索框的显示状态 */
  height: 50px;
  opacity: 1;
}

在这个代码中，我们为搜索框添加了一个`.search-box`类，并设置了其初始状态为高度为0且透明度为0。然后，我们使用过渡属性来定义搜索框的过渡效果，包括高度和透明度。当搜索框具有`.show`类时，它将具有高度为50px且完全可见的状态。

最后，当搜索图标被点击时，你可以使用JavaScript来添加或移除`.show`类，以触发搜索框的动画效果。以下是一个示例代码：

const searchIcon = document.querySelector('.search-icon');
const searchBox = document.querySelector('.search-box');

searchIcon.addEventListener('click', function() {
  searchBox.classList.toggle('show');
});

在这个代码中，我们使用`classList.toggle`方法来在搜索图标的点击事件中添加或移除`.show`类。这将触发搜索框的动画效果，使其在点击搜索图标时弹出或收起。
#### 引用[.reference_title]
- *1* [点击搜索图标动态缓缓弹出一个搜索框如何实现,运用js和css](https://blog.csdn.net/weixin_42578963/article/details/129454372)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [html5搜索框特效点击搜索框弹出分类搜索框代码](https://blog.csdn.net/weixin_30946627/article/details/117759250)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

bootstrap4模仿写一个百度搜索框,增加防抖,输入框增加'X'清除功能,点击搜索必须要等待请求结果返回后才能继续点击

好的，下面是相应实现的代码：

HTML：

<div class="container">
  <div class="row justify-content-center">
    <div class="col-lg-6">
      <form>
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" id="searchBox" placeholder="请输入搜索内容">
            <div class="input-group-append">
              <button type="button" class="btn btn-secondary" id="clearBtn"><i class="fas fa-times"></i></button>
            </div>
          </div>
          <button type="submit" class="btn btn-primary mt-3" id="searchBtn">搜索</button>
        </div>
      </form>
    </div>
  </div>
</div>

CSS：

.container {
  margin-top: 50px;
}

#searchBox {
  border-radius: 20px 0 0 20px;
}

#clearBtn {
  display: none;
  border-radius: 0 20px 20px 0;
}

#searchBtn {
  border-radius: 0 20px 20px 0;
}

input:focus + #clearBtn {
  display: block;
}

JavaScript：

// 防抖函数
function debounce(func, wait, immediate) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    const later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    const callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

// 清空搜索框
function clearSearchBox() {
  $("#searchBox").val("");
  $("#clearBtn").hide();
}

$(document).ready(function() {
  // 监听搜索框输入
  $("#searchBox").on("input", function() {
    if ($(this).val().length > 0) {
      $("#clearBtn").show();
    } else {
      $("#clearBtn").hide();
    }
  });

  // 监听清除按钮点击
  $("#clearBtn").on("click", function() {
    clearSearchBox();
  });

  // 监听表单提交
  $("form").on("submit", function(e) {
    e.preventDefault();
    const keyword = $("#searchBox").val().trim();
    if (keyword.length > 0) {
      // 模拟发送请求
      $("button").prop("disabled", true);
      setTimeout(function() {
        alert(`搜索关键词：${keyword}`);
        $("button").prop("disabled", false);
      }, 2000);
    }
  });

  // 防抖处理
  $("form").on("submit", debounce(function(e) {
    e.preventDefault();
  }, 500, true));
});

在这个示例中，我们使用了Bootstrap 4的输入框组件和Font Awesome图标库中的"fa-times"图标来创建了一个带有清空功能的搜索框。当用户输入内容时，清空按钮会显示出来，点击清空按钮会清空搜索框。在搜索按钮被点击时，会模拟发送请求，并在请求返回后弹出提示框显示搜索关键词。在请求发送期间，搜索按钮会被禁用。防抖函数的间隔时间为500毫秒，即当用户输入停止超过500毫秒后才会触发搜索请求。