jquery function 未正確執行

Question

我正在嘗試在頁面上實現覆蓋，但是它沒有按預期工作。

用例：

• 當用戶點擊頁面上的搜索圖標時，它會顯示一個覆蓋
• 當顯示疊加層時，用戶可以單擊關閉按鈕來移除疊加層

問題：當我在瀏覽器中刷新並查看我的 js 代碼時，我的疊加層已經明顯顯示，在我單擊搜索圖標之前不應該這樣，所以我沒有正確調用它嗎？

我在我的 Search.js 中的 events() function 中調用了“openOverlay”和“closeOverlay”函數，這應該會觸發 function。

開發環境：

• node.js 與 webpack
• scripts.js：導入主 css 文件並實例化模塊
• Search.js 和我的覆蓋代碼（導入 jquery 並導出默認搜索）

腳本.js

import "../css/styles.css"

// modules
import Search from "./modules/Search"

//instantiate new object using modules/classes
const search = new Search()

// Allow new JS and CSS to load in browser without a traditional page refresh
if (module.hot) {
  module.hot.accept()
}

搜索.js

import $ from 'jquery';


//alert("helo there");

function Search(){
    //describe/create object
    var openButton = $(".js-search-trigger");
    var closeButton = $(".s-overlay__close");
    var searchOverlay = $(".s-overlay");

    //events
    function events() {
        openButton.on("click", openOverlay);
        closeButton.on("click", closeOverlay);
    };
    events();
    
    //methods
    function openOverlay(){
        searchOverlay.addClass("s-overlay--active");
    };
    function closeOverlay(){
        searchOverlay.removeClass("s-overlay--active");
    };
}
export default Search;

html：

<div class="s-overlay s-overlay--active">
    <div class="s-overlay__top">
        <div class="s-container">
            <i class="s-overlay__icon" aria-hidden="true">
                <svg>...</svg>
            </i>
            <input id="search-term" class="search-term" type="text" placeholder="What are looking for?">
            <i class="s-overlay__close" aria-hidden="true">
                <svg>...</svg>
            </i>
        </div>
    </div>
</div>

css：

.s-overlay { overflow-y: auto; overflow-x: hidden; z-index: 110; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.96); visibility: hidden; opacity: 0; transform: scale(1.09); transition: opacity 0.3s, transform 0.3s, visibility 0.3s; box-sizing: border-box;}
.s-overlay--active { visibility: visible; opacity: 1; transform: scale(1);}
.s-overlay__top {  margin-top: 32px; position: relative; padding: 1em; background-color: rgba(0, 0, 0, 0.12); }
.s-overlay__icon { line-height: 0; display: block; }
.s-overlay__close {margin-left: auto; line-height: 0; display: block; transition: all 0.3s;}
.s-overlay__close:hover { opacity: 1; }

Answer 1

您已經在頁面加載時將活動 class 分配給 DOM 元素：

<div class="s-overlay s-overlay--active">

只需移除 class，您就會看到所需的行為。

<div class="s-overlay">