<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 5 年前。
javascript - 将一个 div 滑过两个 div
标签 javascript jquery html css
我有两个 div 。 div-1 和 div-2 。它需要一直保留，但我想要一些菜单项使用另一个 div 名称 div-3 哪个单击按钮时可见。我希望同时使用 div-3 而不是 div-1 和 div-2。我该怎么做？
最佳答案
JavaScript 注释
安IIFE是JavaScript中非常常见的设计模式通常用于隐藏您的代码，使其不会被其他脚本更改。
您可以使用 addEventListner 向元素添加事件监听器功能。
您可以使用 querySelector 获取 HTMLElement接受选择器的函数。因此，要获得第一个 div，您可以使用 document.querySelector("div") .要获取 ID 为“item”的元素，您可以使用 document.querySelector("#item") .要获取类为“active”的第一个元素元素，您可以使用 document.querySelector(".active") .您也可以使用 document.querySelector("div#item.active")获得满足所有先前要求的元素或document.querySelector("div, #item, .active")获得满足任何要求的元素。如您所见，这与 CSS 选择器的工作原理相同。
要检查变量是否是类的实例，您可以使用 instanceof .
有多种方法可以使用 JavaScript 更改元素的外观。
一是改类名element.className = "active" ，另一种是直接改造型element.style = "opacity: 1;" .
样式注释
收件人position您需要设置其 position 的位于其他元素之上的元素至 absolute和容器的元素 relative .当您绝对定位一个元素时，它相对于最后一个定位的容器定位 relatively (默认为 <html> 元素)。
有两种主要的方法可以将元素并排放置:float: left;和 display: inline-block; .这就像在记事本上书写一样，它将尽可能多的元素放在一起，并在它们下面重复相同的过程。
隐藏元素的常用方法有 3 种。 1: opacity: 0;这只会使该元素不可见，但它仍然存在，因此您可能还应该使用 pointer-events: none;这样它就不会阻止您单击它后面的内容。 2: height: 0;这只会缩小元素，使其没有高度，这实际上使它不可见。 3: display: block;这基本上完全删除了元素。
例子
// IIFE Design Pattern
(function() {
// Run onLoad function if page is fully loaded
if (document.readystate === "complete") onLoad();
// Else add an event listener to call onLoad function when page gets fully loaded
else document.addEventListener("DOMContentLoaded", onLoad);
var divIsActive = false;
/**
* Function to be called when page is fully rendered
* @returns {void}
*/
function onLoad() {
// Find button
var button = document.querySelector("#toggle");
// Check if the button was found
if (button instanceof HTMLElement) {
// Add an click event listener
button.addEventListener("click", toggle);
}
}
/**
* Toggles the div to open/close
* @returns {void}
*/
function toggle() {
// Find Div
var div = document.querySelector("#div-3");
// Check if the div was found
if (div instanceof HTMLElement) {
// swap the boolean value
divIsActive = !divIsActive;
// change the classname based on the boolean value
div.className = divIsActive ? "active" : "";
}
}
})();html,
body {
height: 100%;
width: 100%;
margin: 0;
}
#container {
position: relative;
height: 100%;
width: 100%;
}
#div-1, #div-2 {
height: 100%;
float: left;
width: 50%;
}
#div-1 {
background-color: brown;
}
#div-2 {
background-color: pink;
}
#div-3 {
background-color: green;
pointer-events: none;
transition: all 0.4s;
position: absolute;
height: 40%;
opacity: 0;
right: 0;
left: 0;
top: 0;
}
#div-3.active {
pointer-events: all;
opacity: 1;
}
#toggle {
position: absolute;
cursor: pointer;
z-index: 99999;
right: 10px;
top: 10px;
}<div id="container">
<button id="toggle">Toggle</button>
<div id="div-1"></div>
<div id="div-2"></div>
<div id="div-3"></div>
</div>关于javascript - 将一个 div 滑过两个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47242448/