# 詞典摺疊元素問題請教

**URL:** <https://forum.freemdict.com/t/topic/16894>\
**Category:** 词典装饰排版交流分享\
**Tags:** 求助\
**Created:** [2022 年11 月 5 日 09:34 UTC](https://forum.freemdict.com/t/topic/16894 "2022-11-05T09:34:34Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

作者： ![eudic](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/e/77aa72/32.png) [@eudic](https://forum.freemdict.com/u/eudic)\
发布日期： [2022 年11 月 5 日 09:34 UTC](https://forum.freemdict.com/t/topic/16894/1 "2022-11-05T09:34:34Z")

</div>

（deleted）

---

<div class="post-metadata">

作者： ![mdict6](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/m/8491ac/32.png) [@mdict6](https://forum.freemdict.com/u/mdict6)\
发布日期： [2022 年11 月 5 日 09:37 UTC](https://forum.freemdict.com/t/topic/16894/2 "2022-11-05T09:37:27Z")

</div>

需要html折叠。我知道有两种实现，

1. 直接写在mdx解包后的txt里
2. 通过.js 文件来加载

```auto
<details close>
<summary>head</summary>

body

</details>

```

---

<div class="post-metadata">

作者： ![eudic](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/e/77aa72/32.png) [@eudic](https://forum.freemdict.com/u/eudic)\
发布日期： [2022 年11 月 5 日 09:47 UTC](https://forum.freemdict.com/t/topic/16894/3 "2022-11-05T09:47:42Z")

</div>

是需要正則替換，還是直接加上去呢？完全的菜鳥問題(◐‿◑)

---

<div class="post-metadata">

作者： ![mdict6](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/m/8491ac/32.png) [@mdict6](https://forum.freemdict.com/u/mdict6)\
发布日期： [2022 年11 月 5 日 10:05 UTC](https://forum.freemdict.com/t/topic/16894/4 "2022-11-05T10:05:28Z")

</div>

我不会，帮不到你。你学会了可以教我吗🙂🙂

---

<div class="post-metadata">

作者： ![eudic](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/e/77aa72/32.png) [@eudic](https://forum.freemdict.com/u/eudic)\
发布日期： [2022 年11 月 5 日 10:09 UTC](https://forum.freemdict.com/t/topic/16894/5 "2022-11-05T10:09:58Z")

</div>

當然:P 希望可以等到熱心的解答(｡ì \_ í｡)

---

<div class="post-metadata">

作者： ![mdict6](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/m/8491ac/32.png) [@mdict6](https://forum.freemdict.com/u/mdict6)\
发布日期： [2022 年11 月 5 日 10:12 UTC](https://forum.freemdict.com/t/topic/16894/6 "2022-11-05T10:12:21Z")

</div>

我认识一个大佬，他学过js 我来at他下  
呼叫六兄 @anon69319103 @6lj61

---

<div class="post-metadata">

作者： ![eudic](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/e/77aa72/32.png) [@eudic](https://forum.freemdict.com/u/eudic)\
发布日期： [2022 年11 月 5 日 10:15 UTC](https://forum.freemdict.com/t/topic/16894/7 "2022-11-05T10:15:49Z")

</div>

有可能不需要js喔，因為ote16就只有mdxヽ(；▽；)ノ

---

<div class="post-metadata">

作者： ![6lj61](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/6/74df32/32.png) [@6lj61](https://forum.freemdict.com/u/6lj61)\
发布日期： [2022 年11 月 5 日 10:25 UTC](https://forum.freemdict.com/t/topic/16894/8 "2022-11-05T10:25:05Z")

</div>

求助各位：被戴高帽如何脱身？

我不大啊，也不佬。我的JS水平仅在看看简单代码，是不是能删掉不需要的功能的地步，其他一点看不懂，更不会写。

参考：[\<details\>: The Details disclosure element - HTML | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)

## HTML

```html
<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

```

## CSS

```css
details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: .5em .5em 0;
}

summary {
    font-weight: bold;
    margin: -.5em -.5em 0;
    padding: .5em;
}

details[open] {
    padding: .5em;
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: .5em;
}

```

---

<div class="post-metadata">

作者： ![eudic](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/e/77aa72/32.png) [@eudic](https://forum.freemdict.com/u/eudic)\
发布日期： [2022 年11 月 5 日 10:30 UTC](https://forum.freemdict.com/t/topic/16894/9 "2022-11-05T10:30:42Z")

</div>

太感謝了ヽ(；▽；)ノ

---

<div class="post-metadata">

作者： ![mdict6](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/m/8491ac/32.png) [@mdict6](https://forum.freemdict.com/u/mdict6)\
发布日期： [2022 年11 月 5 日 10:38 UTC](https://forum.freemdict.com/t/topic/16894/10 "2022-11-05T10:38:06Z")

</div>

哈哈哈，士别三日嘛

---

<div class="post-metadata">

作者： ![eudic](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/e/77aa72/32.png) [@eudic](https://forum.freemdict.com/u/eudic)\
发布日期： [2022 年11 月 5 日 10:38 UTC](https://forum.freemdict.com/t/topic/16894/11 "2022-11-05T10:38:14Z")

</div>

請問是兩個部分都需要修改嗎？

---

<div class="post-metadata">

作者： ![mdict6](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/m/8491ac/32.png) [@mdict6](https://forum.freemdict.com/u/mdict6)\
发布日期： [2022 年11 月 5 日 11:05 UTC](https://forum.freemdict.com/t/topic/16894/13 "2022-11-05T11:05:10Z")

</div>

https://codepen.io/mdict/embed/preview/GRGjRjg?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=GRGjRjg

---

<div class="post-metadata">

作者： ![eudic](https://forumcdn.freemdict.com/letter_avatar_proxy/v4/letter/e/77aa72/32.png) [@eudic](https://forum.freemdict.com/u/eudic)\
发布日期： [2022 年11 月 5 日 12:07 UTC](https://forum.freemdict.com/t/topic/16894/14 "2022-11-05T12:07:40Z")

</div>

好具體！！太感謝了^\_^