【发布时间】：2022-01-17 20:46:38
【问题描述】：
我正在尝试在页面上实现覆盖，但它没有按预期工作。
用例：
- 当用户点击页面上的搜索图标时，会显示一个叠加层
- 当显示叠加层时，用户可以点击关闭按钮来移除叠加层
问题： 当我在浏览器中刷新并查看我的 js 代码时，我的叠加层已经明显显示，这在我单击搜索图标之前不应该显示，所以我没有正确调用它吗？
我在 Search.js 的 events() 函数中调用了“openOverlay”和“closeOverlay”函数，这应该会触发该函数。
开发环境：
- node.js 和 webpack
- scripts.js：导入主 css 文件并实例化模块
- Search.js 和我的覆盖代码（导入 jquery 并导出默认搜索）
scripts.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; }
【问题讨论】：
-
作为第一个调查步骤，我将在方法中添加
console.log('openOverlay')和console.log('closeOverlay')，以便您准确查看方法何时被调用。如果在页面加载时没有调用它们并且您仍然看到覆盖，我会假设您的样式逻辑或热重新加载存在问题。您可以尝试评论scripts.js的最后几行，以便了解热重载是否导致此处出现问题。 -
Alex 我测试了你所说的，我的覆盖仍然存在，我的 css 似乎可以正常工作。但是，当我独立于 events() 调用 openOverlay() 和 closeOverlay() 函数时，它可以工作，如果我调用 events() 来调用其中的这两个函数，为什么会这样？
-
所以你确定这两种方法在页面加载时肯定没有被调用？您确定这种“可见覆盖”状态不是热模块重新加载的缓存状态吗？评论
scripts.js的最后几行怎么样，你试过吗？ -
Alex 我注释掉了热重载并且覆盖仍然存在。当我对这两种方法执行 console.log 时，每个函数名称都会显示在 F12 控制台中。如果我在其中调用这两种方法，event() 似乎不起作用，但如果我独立添加 openOverlay() 和 closeOverlay() 函数，脚本就可以工作。我必须先防止默认，以免触发它吗？
-
Alex 我在这里codepen.io/krystyna93/pen/rNGRJwR 的codepen 中进行了测试，但是它在做同样的事情，覆盖仍然存在。当你查看它时
标签： javascript html jquery css