CSS：之前和兄弟选择器不工作

Question

我有以下标记，并且我需要找到一种CSS方式来在每次.hide类处于活动状态时更改三角形。

要做到这一点我用一个伪元素是这样的：

summary:before { 
    content: '\25BC'; 
} 
summary:before + .hide { 
    content: '\25BA'; 
} 

的问题是：这是行不通的。箭头不会改变。尽管总结：之前+ .hide出现在DevTools中。

那么如何在不使用JavaScript的情况下达到预期的效果CSS？

var $div = $('summary'); 
 

 
$div.on('click', function() { 
 
    $('ul').toggleClass('hide'); 
 
});

.wrapper { 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: #ecf0f1; 
 
} 
 
.details { 
 
    outline: none; 
 
    background-color: #95a5a6; 
 
    cursor: pointer; 
 
    position: relative; 
 
} 
 
summary { 
 
    outline: none; 
 
    margin-left: 30px; 
 
} 
 
summary:before { 
 
    content: '\25BA'; 
 
    font-size: 12px; 
 
    position: absolute; 
 
    top: 2px; 
 
    left: 13px; 
 
} 
 
summary:before + ul.hide { 
 
    content: '\25BC'; 
 
    font-size: 12px; 
 
    position: absolute; 
 
    top: 2px; 
 
    left: 13px; 
 
} 
 
.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="details"> 
 
    <summary>Sample</summary> 
 
    <ul class="hide"> 
 
     <li> 
 
     <input type="radio" checked/> 
 
     <label>Label 1</label> 
 
     </li> 
 
     <li> 
 
     <input type="radio" /> 
 
     <label>Label 2</label> 
 
     </li> 
 
     <li> 
 
     <input type="radio" /> 
 
     <label>Label 3</label> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

您不能选择在CSS上一个元素。相反，添加一个类到div并切换它。

请尝试以下解决方案。

var $div = $('summary'); 
 

 
$div.on('click', function() { 
 
    $('ul').toggleClass('hide'); 
 
    $(this).toggleClass('collapse'); 
 
});

.wrapper { 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: #ecf0f1; 
 
} 
 
.details { 
 
    outline: none; 
 
    background-color: #95a5a6; 
 
    cursor: pointer; 
 
    position: relative; 
 
} 
 
summary { 
 
    outline: none; 
 
    margin-left: 30px; 
 
} 
 
summary:before { 
 
    content: '\25BA'; 
 
    font-size: 12px; 
 
    position: absolute; 
 
    top: 2px; 
 
    left: 13px; 
 
} 
 
summary.collapse:before { 
 
    content: '\25BC'; 
 
} 
 
.hide { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="details"> 
 
    <summary>Sample</summary> 
 
    <ul class="hide"> 
 
     <li> 
 
     <input type="radio" checked/> 
 
     <label>Label 1</label> 
 
     </li> 
 
     <li> 
 
     <input type="radio" /> 
 
     <label>Label 2</label> 
 
     </li> 
 
     <li> 
 
     <input type="radio" /> 
 
     <label>Label 3</label> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

你已经在你的代码编写了2次失误。

1st：您在两处复制了伪类的样式。

第2张：您已将'隐藏'类直接放入兄弟。正确的做法是把它放在父母身上，这样你可以访问所有的孩子。

您已经切换类'hidden'而它应该是'expand'，因为默认情况下，据我了解，您的菜单是关闭的，当用户点击详细信息框时（'展开'）。希望这是有道理的。

我已经为你做了两个代码。

在第一个我们扩展ul列表使用display:block和display:none和继jQuery中添加的类。

Example 1

---

在第二个，我们只使用jQuery来达到不错的幻灯片动画展开UL列表。我们也默认隐藏ul。

Example 2