如何在沒有摘要標簽的情況下隱藏詳細信息標簽？

Question

我想隱藏沒有摘要的詳細信息標簽，在我的代碼中，摘要在一種情況下不可見 [as isvisible==false]。 因此，當摘要不可見時，詳細信息關鍵字是可見的，但我也想隱藏它。 我試圖找到解決方案，但如果不使用摘要標記，我將無法獲得任何解決方案。

<template>
<details>
    <summary v-if="!isvisible">Hello everyone</summary>
</deatils>
<template>
<script>
export default{
    data(){
        return{
            isvisible: true,
            }
    }
}
</script>
<style>
details > summary {
  list-style: none;
  -webkit-appearance: none;
}

details > summary::-webkit-details-marker {
  display: none;
}
</style>

Answer 1

默認使用 open 屬性顯示<details>元素的內容，使用v-show有條件地顯示<summary> 。

<details open>
    <summary v-show="!isvisible">Hello everyone</summary>
    Content
</details>

Answer 2

您可以獲得的最接近的是：empty 偽類：

details:empty {
  display: none;
} 

盡管這僅在 summary 元素不存在時才有效，但需要更改標記。

Answer 3

要在沒有摘要元素的情況下隱藏詳細信息標簽，您可以嘗試在 CSS 中結合使用摘要元素和:not偽類。

 details:not(summary) { display: none; }

如果它沒有 summary 元素作為子元素，這將隱藏 details 元素。