Question

有没有办法在纯css中执行以下操作。如果我的rds-trigger-button类已激活，我希望tab div可见，否则将被隐藏。

HTML：

<div>
   <div class="rds-trigger-button"><span class="rds-carrot">&#9660;</span> Learn More</div>
   <div class="tab">
       Cardigan organic four loko, Etsy art party Godard jean shorts. Chillwave next level letterpress lumbersexual wolf jean shorts, church-key ugh vegan typewriter PBR four loko. Occupy whatever chillwave, pug tote bag organic migas High Life hoodie flannel Schlitz small batch distillery DIY.
   </div>
</div>

的CSS：

.rds-trigger-button{
    border: 1px blue solid;
    width:100px;
    padding:12px;
    position:relative;
}
.rds-trigger-button.active{
    border-bottom:1px white solid;
    z-index:9999;
}
.rds-trigger-button.active + .tabs{
    display:block !important;
}
.rds-carrot{
    font-size:10px;
    color:#ccc;
    padding-right:8px;
}
.tab{
    display:none;
    position:absolute;
    margin-top:-1px;
    width:356px;
    background-color:#fff;
    min-height:50px;
    padding:24px;
    border: 1px #2E51A1 solid;
}

http://jsfiddle.net/0sqoaxxs/2/

Answer 1

删除.rds-trigger-button.active + .tabs末尾的s以获取.tab;）

Answer 2

简化代码为：

.tab {
  display: none;
}
.rds-trigger-button.active + .tab {
  display: block;
}

Updated Example

在上面发布的代码中，您正在使用选择器.rds-trigger-button.active + .tabs。由于元素的类是.tab（单数），而不是.tabs，因此它没有被应用。此外，您还在您发布的示例中使用了选择器.rds-trigger-button.active > .tabs。由于.tab不是.rds-trigger-button.active的直接子女，因此和的原因不同。

为了澄清，+是adjacent sibling combinator。顾名思义，它将选择直接的，相邻的兄弟元素。

在某些情况下，您可能也对general sibling combinator, ~感兴趣。

Answer 3

只需将其添加到您的CSS

即可

.active ~ .tab{
   display: block;
}

如果其他兄弟拥有类，则在兄弟上运行CSS

3 个答案: