带有功能关闭按钮的弹出窗口（HTML，CSS，JavaScript）

Question

我是一个新手，但是我试图建立一个网站，很不幸遇到了一个问题。

我在网格中有一组文章（卡片）。每张卡都包含带有标题的“缩略图”，图像和文本的简短预览。这个想法是，当您单击卡片项目时，将弹出一个带有完整文章的弹出窗口，其中可能包含各种HTML和CSS。单击后，背景也会变得模糊。弹出窗口的右上角将有一个关闭按钮。

我遇到的问题是，整篇文章都是卡片项目的子项。这意味着在文章内部时，单击功能会不断发生。因此，即使单击关闭按钮，它也会立即重新打开。我希望用户能够单击文章并与之交互，而不会意外关闭它，除非他们单击.close div。

允许我分享代码（它是用哈巴狗/翡翠编写的：：

HTML（Pug）：

.card(onclick="expandFunction()")
    .image
    .information
        h4.title Preview Title
        p.description Preview Description
    #blurry.hideme
    article#full.hideme
        h4.m-title Main Title
        p.m-description Main Description 
        p.m-body Main Article
        .close(onclick="contractFunction()")

Javascript：

function expandFunction() {
  var y = document.getElementById("full");
  var x = document.getElementById("blurry");
  y.classList.toggle("hideme");
  x.classList.toggle("hideme");
}

function contractFunction() {
  var y = document.getElementById("full");
  var x = document.getElementById("blurry");
  y.classList.toggle("hideme");
  x.classList.toggle("hideme");
}

hideme类仅仅是应用于div的display: none。

此外，现在我的JavaScript已使用ID进行硬编码，以打开其中一张卡片。而是可以使用相对路径，这样我不必为我拥有的每张卡都创建唯一的功能？

Answer 1

您应该检查弹出窗口是否已经打开，如果是，请不要再次运行扩展功能。

function expandFunction() {
  var x = document.getElementById("blurry");
  if(x.classList.contains("hideme")) { 
    var y = document.getElementById("full");
    element.classList.toggle("hideme");
    x.classList.toggle("hideme");
  }
}

这种关闭卡的唯一方法是通过.close按钮。

Answer 2

据我所知，您只需要防止click事件通过DOM传播，我将像这样更改您的脚本：

function expandFunction(event) {
   event.stopPropagation();
   var y = document.getElementById("full");
   var x = document.getElementById("blurry");
   element.classList.toggle("hideme");
   x.classList.toggle("hideme");
}

function contractFunction(event) {
   event.stopPropagation();
   var y = document.getElementById("full");
   var x = document.getElementById("blurry");
   element.classList.toggle("hideme");
   x.classList.toggle("hideme");
}

通过这种方式，您所做的任何点击都会影响触发它的元素，而不会沿着DOM触发其他事件传播>