单击图标时搜索打开，但单击关闭图标时不会关闭答案

【问题标题】：Search opens when icon is clicked but won't close when close icon is clicked单击图标时搜索打开，但单击关闭图标时不会关闭
【发布时间】：2022-12-08 03:05:19
【问题描述】：

我在使用 WordPress 的 JavaScript 上出现错误，我可以在其中打开搜索但无法关闭它。我有一个 functions.php，其中有一个 wp_enqueue_script 用于实时搜索脚本、Search.js、Index.js、header.php 和 footer.php，其中包含问题所需的代码：

functions.php代码：

wp_enqueue_script('live-search-javascript',
get_theme_file_uri('/js/modules/Search.js'), array('jquery'), '1.0', true);

header.php图标代码：

<span class="search-trigger js-search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>

footer.php代码：

<div class="search-overlay">
  <div class="search-overlay__top"></div>
    <div class="container"></div>
      <i class="fa fa-search search-overlay__icon" aria-hidden="true"></i>
      <input type="text" class="search-term" placeholder="Search DC" id="search-term">
      <i class="fa fa-window-close search-overlay__close" aria-hidden="true"></i>
</div>

Index.js 代码：

import "../css/style.scss";
import $ from 'jquery';

// Our modules / classes
import MobileMenu from "./modules/MobileMenu";
import HeroSlider from "./modules/HeroSlider";
import GoogleMap from "./modules/GoogleMap";
import Search from "./modules/Search";

// Instantiate a new object using our modules/classes
const mobileMenu = new MobileMenu();
const heroSlider = new HeroSlider();
const googleMap = new GoogleMap();
const mySearch = new Search();

搜索.js代码：

import $ from 'jquery';

class Search {
  constructor() {
    this.openButton = $(".js-search-trigger");
    this.closeButton = $(".search-overlay__close");
    this.searchOverlay = $(".search-overlay");
    this.events();

  }

  events() {
    this.openButton.on("click", this.openOverlay.bind(this));
    this.closeButton.on("click", this.closeOverlay.bind(this));
  }


  openOverlay() {
    this.searchOverlay.addClass("search-overlay--active");

  }

  closeOverlay() {
    this.searchOverlay.removeClass("search-overlay--active");
  }
}

export default Search;

搜索打开，只是不会关闭。我该如何解决这个问题？

【问题讨论】：

与您的问题无关，但您已经拥有 99% 的现代 JS，但您仍然为了执行 document.querySelector() 的唯一目的而引入 jQuery。这只是个人意见，也许您对 jQuery 有其他用途，但至少对于这个示例，我认为我会完全取消它。
您是否在closeOverlay 中放置了断点以查看它是否触发？
我发现它会关闭，只是我必须向下滚动到可以关闭的位置。我希望它从页面顶部关闭。
“打开”和“关闭”只是您使用 CSS 类控制的视觉对象。如果您的 JS 事件正在触发，那么您可能需要调试 CSS。如果你的 JS 事件没有触发，那就是 JS。那么，您的事件是否正在触发。忽略“打开”和“关闭”，只写入控制台日志或警报
我想我找到了可以编辑 CSS 文件的地方。它位于名为 search-overlay.scss 的文件中。

标签： javascript php html jquery

【解决方案1】：

我发现它确实关闭了，只是我必须向下滚动而不是在页面顶部。可以修复的文件在css文件中叫做search-overlay.scss。搜索栏需要有一个可以执行搜索的地方，而不是在页眉所在的页面顶部。

【讨论】：