Question

我正在使用纯CSS而不是Javascript实现可关闭的<div>。

HTML和CSS：

<!DOCTYPE html>
<html>
  <head>
<style>
  div.messages 
  {
    padding: 10px;
    background-image: none;
    border: 1px solid transparent;
    border-color: #bce8a1;
    border-radius: 5px;
    width: 300px;
  }

  div.messages:before
  {
    content: "\274C";
    float: right;
    cursor: pointer;
  }

  div.messages:active
  {
    height: 0px;
    display: none;
  }
</style>
  </head>
  <body>
<div class= "messages">
      In publishing and graphic design, lorem ipsum is a filler text commonly used to demonstrate the graphic elements of a document or visual presentation. Replacing meaningful content that could be distracting with placeholder text may allow viewers to focus on graphic aspects such as font, typography, and page layout. It also reduces the need for the designer to come up with meaningful text, as they can instead use hastily generated lorem ipsum text.
</div>
  </body>
</html>

代码可以工作（有点），但我有一些笔记，我想请求帮助

关闭可以在Firefox上运行; Chrome似乎也会关闭，但只要鼠标释放就会再次显示<div>
每当我点击其范围内的任何位置时，<div>会闪烁。我如何让它继续显示？

Answer 1

这里的问题是你正在使用：active来修改你的div。 Active是为元素上的鼠标事件保留的css字。我自己从未发现需要使用：在div上激活。（本质上我将它们用于可点击的对象，即锚点，按钮）。现在：只有在点击发生时才会应用“活动”。

你会注意到在div的中心点击也会缩小到height: 0px。

解决方案：

- 正确的解决方案是使用js，通过按钮切换，将类应用于要缩小的div。该课程将height: 0; display:none;

- 你可以使用锚点来解决这个问题：主动。但这是不好的做法。（当我有机会时，我会用这个更新）

Closable <div>无法在Chrome浏览器上运行</div>

1 个答案: