我想隐藏的细节标记没有摘要,在我的代码摘要是不可见的一个条件[作为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>
3条答案
按热度按时间rslzwgfq1#
默认情况下,使用open属性显示
<details>
元素的内容,使用v-show
有条件地显示<summary>
。8hhllhi22#
最接近的方法是:empty伪类:
尽管这只在summary元素不存在时才起作用,但这需要修改标记。
iovurdzv3#
要在没有summary元素的情况下隐藏details标记,可以尝试在CSS中组合使用summary元素和
:not
伪类。如果details元素没有summary元素作为子元素,这将隐藏该元素。