HTML5 Hilfe beim <details>-Element

[d9C]

Hallo.

Ich habe ein Problem mit diesem Element.

<details>    
<summary>Mehr... </summary>    
<fieldset>      
<legend>xyz</legend>      
Anzahl:      
<input type="number" name="anz_es" min="0" max="100" id="anz">      
<br>      
<ol>        
<li>          
<fieldset>            
Bezeichnung:            
<input type="text" name="sonst_be_bez" id="bez">            
<br>            
Entfernung:            
<input type="text" name="sonst_be_entfernung" id="maße-text">            
Maße:            
<input type="text" name="sonst_be_hoehe" id="maße-text">            
/            
<input type="text" name="sonst_be_breite" id="maße-text">            
Vorstand:            
<input type="text" name="sonst_be_vorstand" id="maße-text">           
Nuss:            
<select name="nuss" id="maße-dropdown">              
<option>8</option>              
<option>9</option>              
<option>10</option>            
</select>            
<br>            
Ausrichtung:            
<select name="ausrichtung">              
<option>links</option>              
<option>rechts</option>            
</select>            
Farbe:            
<select name="farbe" id="katalog_bez">             
 <option>F1</option>              
<option>F2</option>              
<option>Edelstahl</option>              
<option>Weiß</option>              
<option>Braun</option>              
<option>Messingpoliert</option>              
<option>Messingtitan</option>            
</select>            
Sicherheitsstufe:            
<select name="sicherheitsstufe" id="">             
<option>x</option>              
<option>y</option>            
</select>            
<details>              
<summary>Nur bei XYZ</summary>              
Griff:              
<select name="sicherheitsstufe" id="">                
<option>a</option>                
<option>b</option>                
<option>c</option>                
<option>d</option>              
</select>            
</details>          
</fieldset>        
</li>      
</ol>    
</fieldset>  
</details>

 summary::-webkit-details-marker {
 display: none
}
summary:before {
    margin-left: 5px;
     content: url(img/pfeil_grün2.png);
}
details[open] summary:before {
    margin-left: 5px;
    content: url(img/pfeil_blau2.png);
}

Wenn ich das erste <details>-Element öffne ändert sich der Pfeil des 2. <details>-Element als sei es ebenfalls geöffnet, obwohl dies nicht der Fall ist.
Ich hoffe ihr könnt mir helfen :)

 

[bodil]

Hallo d9c, willkommen bei html.de!

Ohne so genau zverstanden zu haben, was du vorhast:

• Du hast absichtlich ein Detail-Element in ein Detail-Element geschachtelt?
• Du hast ein Fieldset, das einziges Listenelement einer unsortierten Liste ist, die wiederum in einem Fileldset steht?
• Und das alles ohne weitere Struktur innerhalb des inneren Fieldsets?

Kann man sicher alles machen, erleichtert aber nicht die Fehlersuche.
Was ich auf jeden Fall vermeiden würde, sind die ß in den IDs, aber auch die sind sicher erlaubt und werden nur von Browsern nicht verstanden, die noch kein HTML5 können ...

 

[d9C]

also mit den fieldsets habe ich keine probleme :) die sind mehr für die übersicht auf der seite gedacht. die list elemente stehen deshalb da, weil sich die liste erweitern soll wenn die anzahl größer als 2 ist. also wird das innere fieldset dupliziert(wie genau das umgesetzt wird weiß ich noch nicht, bin noch am anfang). da das 2. innere fieldset aber nicht immer gebraucht wird habe ich dieses in ein details-element gepackt(zum ausklappen eben) und in diesem details-element befindet sich ein weiteres details-element, da auch dort daten sind die man nicht immer braucht. nun habe ich den pfeil vor dem summary-element entfernt und durch ein neuen pfeil ersetzt(grün, nach rechts gerichtet und blau, nach unten gerichtet). mache ich nun das erste details-element auf, ändert sich der pfeil von grün auf blau(was richtig ist), doch geschieht dies auch ungewollt beim 2. details-element, ohne das sich dieses öffnet. also habe ich ein blauen pfeil mit geöffneten details-element und ein geschlossenes details-element mit blauem pfeil.

ich hoffe das ist nun genau genug :)#

edit: ich benutze den neuesten chrome, dort wird fast alles unterstützt.