Question

我有两个div。 div-1 and div-2。我需要一直待在这里但我想要一些菜单项使用另一个div名称div-3，这在按钮点击时可见。我想同时在div-1和div-2上使用div-3。我可以这样做吗？

Answer 1

JavaScript Notes

IIFE是JavaScript中非常常见的设计模式，通常用于隐藏代码，以便其他脚本不会更改。

您可以使用addEventListner函数向元素添加事件侦听器。

您可以使用接受选择器的querySelector函数获取HTMLElement。因此，要获得第一个div，您可以使用document.querySelector("div")。获取带有id＆＃34; item＆＃34;的元素你可以使用document.querySelector("#item")。要获得第一个元素元素＆＃34; active＆＃34;你可以使用document.querySelector(".active")。您还可以使用document.querySelector("div#item.active")来填充所有先前要求的项目，或使用document.querySelector("div, #item, .active")来获取满足任何要求的项目。正如您所看到的，它与CSS选择器的工作方式相同。

要检查变量是否是类的实例，您可以使用instanceof。

有几种方法可以使用JavaScript更改Element的外观。一种是更改班级名称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;这基本上完全删除了该元素。

实施例

＆＃13;

// 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" : "";
    }
  }

})();

＆＃13;

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;
}

＆＃13;

<div id="container">
  <button id="toggle">Toggle</button>
  <div id="div-1"></div>
  <div id="div-2"></div>
  <div id="div-3"></div>
</div>

＆＃13;

将一个div滑过两个div

1 个答案:

JavaScript Notes

造型笔记

实施例