Question

<div class="ms-OverflowSet commandMenu root-236" role="menubar">
    <div class="ms-OverflowSet-item item-237">
        <button type="button" class="ms-Button ms-Button--commandBar commandMenu-item root-239" data-is-focusable="true" tabindex="-1">
            <div class="ms-Button-flexContainer flexContainer-119">
                <i data-icon-name="Edit" class="ms-Button-icon icon-241" role="presentation" aria-hidden="true"></i>
            </div>
        </button>
    </div>
    <div class="ms-OverflowSet-overflowButton overflowButton-238">
        <button type="button" class="ms-Button ms-Button--commandBar commandMenu-overflowitem root-239" aria-label="More" data-is-focusable="true" aria-expanded="false" aria-haspopup="true" tabindex="-1">
            <div class="ms-Button-flexContainer flexContainer-119">
                <i data-icon-name="MoreVertical" class="ms-Button-menuIcon menuIcon-242" role="presentation" aria-hidden="true"></i>
            </div>
        </button>
    </div>
</div>

默认情况下，“ ms-Button ms-Button--commandBar commandMenu-item根239”和隐藏的“ ms-Button ms-Button--commandBar commandMenu-overflowitem根-239”

如果.commandMenu-overflowitem aria展开值的值为“ true”，我想将它们的状态都设置为可见。

.commandMenu-overflowitem[aria-expanded="true"]{
    visibility: visible;
    display: flex
}

以上正在设置commandMenu-overflowitem的状态

类似地，我尝试将commandMenu-item的状态设置如下，但它不起作用

.commandMenu-overflowitem[aria-expanded="true"] .commandMenu-item{
    visibility: visible;
    display: flex
}

Answer 1

您不能仅使用CSS来做到这一点。您需要JS。该问题出现在REACT问题列表中。与REACT有关吗？

如果是ReactJs，则将基于第一个div在状态中设置一个值，然后在第二个div中检查此状态。根据值，您可以显示不同的类。您描述问题的方式有些令人困惑。设置div的状态。我假设是在另一个div类的基础上更改div的类。或者要保存在状态中的任何值。

如何使用CSS根据其他元素的状态在div中设置元素的状态

1 个答案: