CSS: Vorher und Geschwister Selektor funktioniert nicht

Question

Ich habe die folgende Markup, und ich muss eine CSS-Möglichkeit finden, ein Dreieck zu ändern, wenn .Hide-Klasse aktiv ist.

Um dies zu erreichen, habe ich ein Pseudo-Element wie folgt verwendet:

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

Das Problem ist: Es funktioniert nicht. Der Pfeil ändert sich nicht. Auch wenn Zusammenfassung: vor + .Hide erscheint in den DevTools.

So, wie man den gewünschten Effekt erzielt, ohne JavaScript nur CSS zu verwenden?

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

Sie können das vorherige Element in CSS auswählen. Fügen Sie stattdessen eine Klasse zum div hinzu und schalten Sie sie um.

Versuchen Sie unter Lösung.

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

Sie 2 Fehler in Sie Code schreiben gemacht haben.

1st: Sie haben die Stile für Ihre Pseudoklassen an zwei Stellen dupliziert.

2: Sie haben die "versteckte" Klasse direkt an die Geschwister übergeben. Der richtige Weg, es zu tun, ist, es in den Elternteil zu bringen, auf diese Weise können Sie auf alle seine Kinder zugreifen.

Sie haben die Klasse 'hidden' umgeschaltet, während es 'expand' sein sollte, weil standardmäßig, wie ich verstehe, Ihr Menü geschlossen ist und wenn der Benutzer auf das Detailfeld klickt ('expandiert'). Hoffnung, die Sinn macht.

Ich habe zwei Codepens für Sie gemacht.

In der ersten erweitern wir die UL-Liste mit display:block und display:none und folgen der Klasse in der jQuery hinzugefügt.

Example 1

---

Im zweiten erweitern wir die Liste ul nur jquery mit schönen Folienanimationen zu erreichen. Wir verstecken die UL auch standardmäßig.

Example 2