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