Question

我正在尝试创建一个切换函数，只要单击一个按钮并单击关闭按钮，就会触发一个特定的函数（w / c基本上会添加一个CSS规则）：

var open = document.querySelector(".open");
var click = document.querySelector(".btn-click");
var close = document.querySelector(".close");

let display= () => open .classList.toggle("open");
let closeIt = () => open.classList.toggle("close");

let windowEvent= e => {
  if(e.target === open){
         display
 }
};

click.addEventListener("click", display);
close.addEventListener("click", closeIt);
window.addEventListener("click", windowEvent);

我现在遇到的问题是，在我单击按钮并显示元素后，当我点击关闭按钮时，它将隐藏元素，然后一旦我点击该元素，我将无法再显示该元素打开按钮。它必须是开关效应的切换状态。

如何修复我的代码？

编辑：

<button class="btn-click">

<div class="item">
    <div class="content">
      <span class="closebtn"></span>
  </div>

.item {
  visibility: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}

.open {
  visibility: visible;
  opacity: 1;
  transform: scale(1.1);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}


.close {
  opacity: 0;
  transition: top 0.1s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}


span.closebtn {
  background: url("../images/close.jpeg") no-repeat;
}

注意：单击关闭按钮后，我无法再次打开它。似乎开启切换功能无效。

Answer 1

您正在尝试在两个状态（打开和关闭）之间切换，但由于您使用的是两个类，因此您有四个状态（打开+关闭，只打开，只关闭，没有任何状态）。

使用一个类，根据其存在或其他方式确定您希望它处于什么状态。

var item = document.querySelector(".item");
var toggle_button = document.querySelector(".btn-click");
var close_button = document.querySelector(".closebtn");

let toggle_handler = () => item.classList.toggle("open");
let close_handler = () => item.classList.remove("open");

toggle_button.addEventListener("click", toggle_handler);
close_button.addEventListener("click", close_handler);

.item {
  transform: scale(1);
  opacity: 0;
  transition: opacity 0.25s 0s, transform 0.25s;
  height: 150px;
  width: 150px;
  margin: 20px auto;
  background: rgb(100, 100, 100);
}

.open {
  opacity: 1;
  transform: scale(1.1);
}

<button class="btn-click">Click</button>

<div class="item">
  <div class="content">
    <button class="closebtn">Close</button>
  </div>
</div>

Answer 2

问题是，当您尝试单击打开按钮时，它会切换打开类，但不会删除该元素所具有的close类，因此该类将始终存在于该元素中，因此如何要解决这个问题，有很多解决方案我实现了一个简单的解决方案，当你点击打开按钮时，它使用 classlist 属性删除类关闭，

见下面的例子

var open = document.querySelector(".open");
var click = document.querySelector(".btn-click");
var close = document.querySelector(".closee");

let display= () =>{
 open.classList.remove("close");
};
let closeIt = () => {
open.classList.toggle("close");

};

let windowEvent= e => {
  return e.target === open ? display : null;
};

click.addEventListener("click", display);
close.addEventListener("click", closeIt);
window.addEventListener("click", windowEvent);

.close {
  display:none
}

<div>
<button class="btn-click">open</button>
<button class="closee">close</button>
</div>

<p class="open">open me and close me </p>

Answer 3

没有任何元素被引用作为点击打开的实际目标，除了窗口外，如果它是具有类.open的不存在的元素或者为null，则打开它的那个古怪的三元组？在我去任何further down that rabbit hole之前，我删除了代码。我不知道你的代码应该做什么以及我猜到的地方。

在窗口上设置 只有一个 eventListener（您只需要一个eventListener来处理1000（任意数量，可以是任意数量）元素的事件。此方法是名为Event Delegation。为了控制点击时实际执行的操作，您使用if/else if/else条件（请不要使用三元组，直到您在睡眠状态下执行if/else if/else条件。）和{ {1}}属性。最简单的术语event.target是点击，盘旋，打孔或者注册eventListener的任何事件的元素。

<小时/>

演示

＆＃13;

event.target

＆＃13;

window.addEventListener('click', showHide);

function showHide(e) {
  var overlay = document.querySelector('.overlay');
  if (e.target !== e.currentTarget) {
    if (e.target.classList.contains('W')) {
      /* if you want to toggle make .btn.W a higher 
      || z-index. - See CSS: .W {....}
      */
      // overlay.classList.toggle('open');      
      overlay.classList.add('open');
      return false;
    } else if (e.target.classList.contains('X')) {
      overlay.classList.remove('open');
      return false;
    } else {
      return false;
    }
  }
  return false;
}

＆＃13;

html,
body {
  width: 100&;
  height: 100%;
  position: relative;
}

.overlay {
  width: 101vw;
  height: 101vh;
  position: absolute;
  z-index: 0;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.25s, transform 0.25s;
}

.btn {
  cursor: pointer;
}

.W {
  position: relative;
  top: 15vh;
  /* Increase z-index to 1000+ if you want the button to toggle
  || - See JavaScript: overlay.classList....
  */
  z-index: 1;
}

.X {
  position: absolute;
  right: 0px;
  z-index: 1;
  width: 48px;
  height: 48px;
  text-align: center
}

.open {
  background: rgba(80, 160, 240, .0.5);
  z-index: 999;
  opacity: 1;
  transform: scale(1.1);
  transition: opacity 0.25s 0s, transform 0.25s;
}

.content {
  position: absolute;
  display: table;
  z-index: 1000;
  width: 50vw;
  min-height: 50vh;
  background: rgba(240, 160, 80, 0.4);
  color: #930;
  font: 400 .9em/1.2 Verdana;
  margin: 20vh 25vw;
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  padding: 5px 5px 10px 10px;
}

＆＃13;

香草JS切换功能

3 个答案:

演示