nicht angemeldet
hallo
Weiter unten ist eine komplette html Testseite (inclusive css/js).
Ich experimentiere mit verschachtelten detail-Elementen. Im vorliegenden Fall wird nur ein Thread in der Verschachtelung darestellt (js).
Im js gibt es aber etwas seltsames
col.forEach( function(item){
if(item === thisEl){
if( item.open == ""){
item.removeAttribute("open");
item.querySelector("summary").setAttribute("aria-expanded","true");
}
else{
item.querySelector("summary").setAttribute("aria-expanded","false");
}
}
else{
item.removeAttribute("open");
item.querySelector("summary").setAttribute("aria-expanded","false");
}
} );
richtig: wenn ich removeAttribute("open") ausführe muss ich gleichzeitig setAttribute("aria-expanded","true") anweisen.
Das ist logisch total falsch aber es 'funzt'! Zumindest auf Firefox 59
Andere Browser?
Die Frage ist zudem, ist es sinnvoll weitere aria attribute einzubetten?
Wer will kann gern einen codepen oder so von diesem Code machen. Vielleicht wird daraus ja etwas fürs Wiki.
Und ach ja: wer macht mit CSS etwas schönes daraus?
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test </title>
<style>
html{font-size:3.2mm; line-height:1.5; height:100%; }
body{ height:100%; padding: 1rem;}
*{margin:0;padding:0; font-size:1rem;box-sizing: border-box; }
:focus{outline: 2px solid orange; z-index:20; }
h1{margin: 1rem 0; font-size:2rem;}
nav { background:#fff; width:20rem; margin: 1rem 0; }
.nav { padding: 0 0 0 2rem;}
nav, .nav { /*! width:40rem; */ }
nav summary { position:relative; background:#fff; transition: background-color 1s; white-space: nowrap; padding: 0 1rem; }
nav summary[aria-expanded="true"] { background:#eee; white-space: nowrap; padding: 0 1rem; }
nav summary:focus { z-index:10; }
nav details {border:0 solid #ccc; border-width: 0 0 0.1rem 0.1rem;/*! background:#fff; */ margin-right:auto; }
nav div:not(.nav) { overflow:auto; padding: 0.5rem 1rem; /*! box-shadow: 1px 1px 2px 0px #666; */ }
nav + * { margin-top:2rem; }
</style>
</head>
<body class="noscript">
<h1>Navigation mit Details/Summary</h2>
<p>Exclusiv geschaltete detail Elemente sollen jeweils nur einen "thread" in dieser Verschachtelung anzeigen.</p>
<p>Reagiert auf Tastatur und Click</p>
<nav>
<details>
<summary>Level 1 A</summary>
<div class="nav">
<details>
<summary>Level 2 A</summary>
<div>Lorem dolores ipsum sunt </div>
</details>
<details>
<summary>Level 2 B</summary>
<div class="nav">
<details>
<summary>Level 3 A</summary>
<div>Lorem dolores ipsum sunt </div>
</details>
<details>
<summary>Level 3 B</summary>
<div>Lorem dolores ipsum sunt </div>
</details>
</div>
<div>Lorem dolores ipsum sunt </div>
</details>
</div>
</details>
<details>
<summary>Level 1 B</summary>
<div>Lorem dolores ipsum sunt </div>
</details>
<details>
<summary>Level 1 C</summary>
<div>content</div>
</details>
<details>
<summary>Level 1 D</summary>
<div>content</div>
</details>
</nav>
<p>Other Content</p>
<script>
//<!--
function init(){
document.body.classList.remove("noscript");
document.querySelectorAll(".tablist [aria-expanded], .details [aria-expanded]")
.forEach( function(item){
item.setAttribute("aria-expanded",false);
});
document.querySelectorAll("details").forEach( function(detail){
detail.querySelector("summary").setAttribute("aria-expanded","false");
detail.addEventListener(
"click",
function(ev){
ev.stopPropagation();
let thisEl=this;
console.log(thisEl.querySelector("summary"));
thisEl.querySelector("summary").setAttribute("aria-expanded","true");
var col = this.parentElement.querySelectorAll("details");
col.forEach( function(item){
if(item === thisEl){
if( item.open == ""){
item.removeAttribute("open");
item.querySelector("summary").setAttribute("aria-expanded","true");
}
else{
item.querySelector("summary").setAttribute("aria-expanded","false");
}
}
else{
item.removeAttribute("open");
item.querySelector("summary").setAttribute("aria-expanded","false");
}
} );
}
);
});
}
init();
// -->
</script>
</body>
</html>
--
Neu im Forum! Signaturen kann man ausblenden!
Neu im Forum! Signaturen kann man ausblenden!
Rolf B