细节块的不同外观

开发
1

我试图达到一家芬兰媒体公司使用的外观。

截图足以说明，我想：

IMG_3465
IMG_34651306×887 166 KB

我只有基本的 CSS 操作技能，我不确定这是否（容易地）可以通过 CSS 完成。但我的第一次尝试……嗯，不太好。

我用的是（注释当然是为我自己准备的）

/*- 自定义 details 元素样式 - */
/* 替换按钮背景图像和外观 */
summary {
  background-color: #f5f5f5; /* 背景颜色 */
  border: 1px solid #d8d8d8; /* 边框线 */
  padding: 10px; /* 内边距 */
  border-radius: 5px; /* 圆角 */
  cursor: pointer; /* 光标样式 */
  display: flex; /* Flexbox 使用 */
  justify-content: space-between; /* 对齐 */
  align-items: center; /* 垂直居中 */
}
summary:hover {
  background-color: #eaeaea;
}
summary::marker {
  display: none; /* 删除默认列表标记 */
}
summary::after {
  content: '⮟'; /* 添加箭头 */
  font-size: 20px; /* 箭头大小 */
}

/*- 自定义 details 元素内容样式 - */
details[open] summary::after {
  content: '⮝'; /* 打开时将箭头更改为向上 */
}
details {
  margin-bottom: 10px; /* 块之间的间距 */
}
details > div {
  padding: 10px; /* 内容内边距 */
}

有些是我自己做的，有些是 GPT 的建议。

有什么想法吗？

2

嘿 @Jagster :wave:

我已经为此制作了一个主题组件…… :tada:

3

你太棒了 :+1: 现在我要深挖你到底做了什么。

谢谢！

6

首先，我大约在 20 年前用 Visual Basic 做了一个“hello world”的东西。我曾通过试错法调整过一些 WordPress 插件，并且有一次成功地更改了我 VPS 上的所有权，从 root 开始。

那个很棒的解决方案不再遵循 [details .. open]。这与 Details block doesn’t obey open 有关，我猜。

问题是来自这部分吗？


cookedDetails.forEach((details) => {
            details.setAttribute("open", "");

为什么是这样？因为它与 Discourse 中的这个很相似 :joy:

expect(cooked_html).to match_html <<~HTML
      <details open="">
      <summary></summary>
        <p>bar</p>
      </details>