gpt4 book ai didi

CSS set display block to parent
    if
  • has class active(如果
  • 具有活动的类,则css将显示块设置为父
      )

转载 作者:bug小助手 更新时间:2023-10-24 20:29:51 25 4
gpt4 key购买 nike



I have simple question regarding CSS parent and child.

我有一个关于css父母和孩子的简单问题。


Now I need the sub menu show when one of menu has class active.

现在,我需要显示的子菜单时,其中一个菜单有类活动。


I know we just can add display: block together with sub-menu. But I need when one of menu has class active the ul will be set to display: block.

我知道我们只需要将Display:Block和子菜单添加在一起。但我需要当其中一个菜单有类活动的用户界面将被设置为显示:块。


Is it possible?

有可能吗?




.sub-menu {
display: none;
}

.sub-menu .active {
color: blue;
}

<ul class="menu">
<li>Menu 1</li>

<ul class="sub-menu">
<li>A</li>
<li class="active">B</li>
<li>C</li>
</ul>
</ul>

<ul class="menu">
<li>Menu 2</li>

<ul class="sub-menu">
<li>D</li>
<li>E</li>
<li>F</li>
</ul>
</ul>




更多回答

Does this answer your question? Is there a CSS parent selector?

这回答了你的问题吗?是否有一个css父选择器?

Are you trying to make an accordion? developer.mozilla.org/en-US/docs/Web/HTML/Element/details

你在试着做手风琴吗?Developer.mozilla.org/en-US/docs/Web/HTML/Element/details

Try the CSS :has() pseudo class

尝试使用css:has()伪类

Your HTML is invalid. A <ul> can not be the child of a <ul>.

您的HTML无效。

    不能是
      的子级。

优秀答案推荐

What exactly are we trying to hide? The .menu with or without the .active elem or the submenu with or without the .active?

我们到底想隐瞒什么?带或不带.active元素的菜单或子菜单带或不带.active?


If you are looking to have one active sub-menu then using the :has() pseudo-selector should do it.

如果您希望有一个活动子菜单,那么使用:has()伪选择器应该可以做到这一点。




.menu {
list-style: none;
}

.sub-menu {
display: none;
}

.sub-menu:has(.active) {
display: block;
}

.sub-menu .active {
color: blue;
}

<ul class="menu">
<li>Menu 1</li>

<li>
<ul class="sub-menu">
<li>A</li>
<li class="active">B</li>
<li>C</li>
</ul>
</li>
</ul>

<ul class="menu">
<li>Menu 2</li>

<li>
<ul class="sub-menu">
<li>D</li>
<li>E</li>
<li>F</li>
</ul>
</li>
</ul>




更多回答

Your HTML is invalid. Please delete this and fix the HTML. A <ul> cannot be the child of a <ul>

您的HTML无效。请删除此内容并修复该HTML。

    不能是
      的子级

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com