JavaScriptとCSS-メニューを開くと問題が発生する
メニューが互いに重なり合って展開されるときに最初にグリッチが発生するコードがいくつかあります。
最初のメニューでオプション2を選択すると、2番目のオプションが表示されます。 thenに移動して最初のメニューを開くと、メニューが開くときにグリッチが表示されます-シャッターのような遅延がほとんどあります。多分それはzインデックス設定と関係があるのでしょう、私にはわかりませんか？
FirefoxとChromeでは、（見かけ上の）グリッチはありません。サファリでは、以下のスニペット、グリッチがあります。
なぜグリッチなのですか？
const selected = document.querySelectorAll(".selected");
const optionsContainer = document.querySelectorAll(".options-container");
for (let i = 0; i < selected.length; i++) {
selected[i].addEventListener("click", () => {
optionsContainer[i].classList.toggle("open");
selected[i].classList.toggle("open");
for (let j = 0; j < selected.length; j++) {
if (i != j && selected[j].classList.contains("open")) {
optionsContainer[j].classList.toggle("open");
selected[j].classList.toggle("open");
}
}
});
}
for (let i = 0; i < optionsContainer.length; i++) {
let optionsList = optionsContainer[i].querySelectorAll(".options");
for (let j = 0; j < optionsList.length; j++) {
optionsList.forEach(o => {
o.addEventListener("click", () => {
selected[i].innerHTML = o.querySelector("label").innerHTML;
optionsContainer[i].classList.remove("open");
selected[i].classList.remove("open");
if (document.getElementById("level").innerText.indexOf('one') === -1) {
document.getElementById("tier").style.display = "grid";
} else {
document.getElementById("tier").style.display = "none";
}
});
});
}
}.filter-filterbox-row {
display: grid;
grid-template-columns: auto auto;
grid-template-areas: "question select-box";
padding: 5px 5px;
margin-top: -2px;
}
.filter-filterbox-row .question {
grid-template-areas: "question";
width: 100px;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 15px;
text-align: right;
}
.filter-filterbox-row .select-box {
margin-left: -100px;
grid-template-areas: "select-box";
}
.select-box {
width: 200px;
}
.select-box .options-container {
background: #fff;
width: 200px;
display: none;
transition: all 0.4s;
position: absolute;
max-height: 240px;
border: 1px solid #253e5c;
border-radius: 0 0 4.5px 4.5px;
}
.selected {
position: relative;
border: 1px solid #cdcccc;
border-radius: 4.5px;
padding: 4px 15px;
cursor: pointer;
transition: all 0.4s;
}
.selected.open {
border-bottom: none;
border-radius: 4.5px 4.5px 0 0;
transition: all 0.4s;
border-color: #253e5c
}
.selected::after {
content: "";
background: url(media/dropdown-black.png);
background-size: contain;
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 12px;
right: 13px;
top: 10px;
transition: all 0.4s;
}
.selected.open::after {
transform: rotateX(180deg);
top: -11px;
}
.select-box .options-container.open {
border-color: #253e5c;
display: block;
z-index: 99;
}
.select-box .options-container.open .options:nth-child(n+2) {
border-top: 1px solid #253e5c;
}
.select-box .options-container .options {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
}
.select-box .options:hover {
background: #76bc6b;
cursor: pointer;
}
.select-box label {
cursor: pointer;
}
.select-box .options .radio {
display: none;
}
#tier {
display: none;
}<div class="filter-filterbox-row" id="level">
<div class="question"> Level </div>
<div class="select-box">
<div class="selected">
Select level
</div>
<div class="options-container">
<div class="options">
<input type="radio" class="radio" id="1" name="level">
<label for="1">one</label>
</div>
<div class="options">
<input type="radio" class="radio" id="2" name="level">
<label for="2">two</label>
</div>
</div>
</div>
</div>
<div class="filter-filterbox-row" id="tier">
<div class="question"> Select tier </div>
<div class="select-box">
<div class="selected">
Select tier
</div>
<div class="options-container">
<div class="options">
<input type="radio" class="radio" id="bronze" name="tier">
<label for="bronze">Bronze</label>
</div>
<div class="options">
<input type="radio" class="radio" id="silver" name="tier">
<label for="silver">silver</label>
</div>
</div>
</div>
</div>代わりにネストされた<details>と<summary>を使用した場合、違いはありますか？