css 如何隐藏没有摘要标签的详细信息标签?

elcex8rz  于 2023-01-10  发布在  其他
关注(0)|答案(3)|浏览(201)

我想隐藏的细节标记没有摘要,在我的代码摘要是不可见的一个条件[作为isvisible==假]。所以当摘要是不可见的,那么细节关键字是可见的,但我想隐藏了。我试图找到解决方案,但我不能得到任何解决方案,不使用摘要标记。

<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>
rslzwgfq

rslzwgfq1#

默认情况下,使用open属性显示<details>元素的内容,使用v-show有条件地显示<summary>

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

8hhllhi22#

最接近的方法是:empty伪类:

details:empty {
  display: none;
}

尽管这只在summary元素不存在时才起作用,但这需要修改标记。

iovurdzv

iovurdzv3#

要在没有summary元素的情况下隐藏details标记,可以尝试在CSS中组合使用summary元素和:not伪类。

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

如果details元素没有summary元素作为子元素,这将隐藏该元素。

相关问题