Ich habe ein Menü, das "was neu" und "Kategorien" hat, wenn Sie Kategorien drücken, gibt es 3 Kategorien, die Dropdown-Liste. Und wenn Sie jede dieser 3 Kategorien drücken, haben sie Untermenüs. Meine Frage ist, wie kann ich es so machen, dass, wenn eine Kategorie angeklickt wird, die vorherige Kategorie verschwindet. (Zum Beispiel, wenn ich Kategorie 1 geöffnet hätte und dann Kategorie 2 angeklickt hätte, würde das Menü für Kategorie 1 schließen) Ich wurde vorgeschlagen, Radioknöpfe zu verwenden, jedoch habe ich versucht, alle Checkboxen durch Radios zu ersetzen, und es hat nicht funktioniert. Hat jemand irgendwelche Lösungen? Danke im Voraus. Hier ist eine Geige - https://jsfiddle.net/fgkusnt9/So verwenden Sie Optionsfelder anstelle von Kontrollkästchen
<div class='shop-sidebar'>
<ul class='shop-nav'>
<li class="active"><a href="#">What's New</a></li>
<li class='w-sub' data-id='shop-categories'>
<svg class='s_arrow_down'><use xlink:href="#s_arrow_down"></use></svg>
<input type="checkbox" id="categories" />
<label id="label" for="categories">Categories</label>
<ul id="subList">
<li>
<input type="checkbox" id="all" />
<label id="allLabel" for="all">All</label>
</li>
<li>
<input type="checkbox" id="category1" />
<label id="category1Label" for="category1">Category 1</label>
<ul id="subListCategory1">
<li><a href="#">All</a></li>
<li><a href="#">Sub Category 1</a></li>
<li><a href="#">Sub Category 2</a></li>
<li><a href="#">Sub Category 3</a></li>
<li><a href="#">Sub Category 4</a></li>
<li><a href="#">Sub Category 5</a></li>
<li><a href="#">Sub Category 6</a></li>
<li><a href="#">Sub Category 7</a></li>
<li><a href="#">Sub Category 8</a></li>
<li><a href="#">Sub Category 9</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="category2" />
<label id="category2Label" for="category2">Category 2</label>
<ul id="subListCategory2">
<li><a href="#">All</a></li>
<li><a href="#">Sub Category 1</a></li>
<li><a href="#">Sub Category 2</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="category3" />
<label id="category3Label" for="category3">Category 3</label>
<ul id="subListCategory3">
<li><a href="#">All</a></li>
<li><a href="#">Sub Category 1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>css
.shop-sidebar {
width: 30%;
width: calc(295px);
display: inline-block;
padding-right: 65px;
vertical-align: top;
font-family: 'maison',sans-serif;
font-weight: 600;
font-size: 11px;
color: #000;
letter-spacing: 1.5px;
line-height: 18px;
text-transform: uppercase;
}
ul.shop-nav {
list-style: none;
padding: 0;
margin: 0;
}
ul.shop-nav li.active, ul.shop-nav li:hover {
color: #000;
opacity: 1;
font-weight: bold;
}
ul.shop-nav li {
transition: all 0.3s;
cursor: pointer;
padding: 18px 20px;
background-color: #f8f8f8;
margin-bottom: 2px;
}
ul.shop-nav li.active a {
color: #000;
}
ul.shop-nav a {
color: #000;
}
ul.shop-nav li.active, ul.shop-nav li:hover {
color: #000;
opacity: 1;
font-weight: bold;
}
ul.shop-nav li svg {
width: 10px;
height: 10px;
vertical-align: text-bottom;
fill: #000;
transition: all 0.3s;
float: right;
}
ul.shop-nav li ul {
display: none;
list-style: none;
padding-left: 0;
margin: 12px 0 0;
}
ul.shop-nav li ul li {
color: #000;
border: 0 !important;
font-family: 'maison',sans-serif;
font-size: 12px;
letter-spacing: 0;
padding: 0;
font-weight: normal;
text-transform: none;
margin-bottom: 12px;
}
ul.shop-nav li ul ul {
margin-left: 16px;
}
input[type='checkbox'] {
display: none;
}
#subList,
#subListCategory1,
#subListCategory2,
#subListCategory3 {
display: none;
}
#categories:checked ~ #subList {
display: block;
}
#category1:checked ~ #subListCategory1 {
display: block;
}
#category2:checked ~ #subListCategory2 {
display: block;
}
#category3:checked ~ #subListCategory3 {
display: block;
}
Vielen Dank! – user6738171
@ user6738171 NP :) froh zu helfen – Deep
Ich habe auch eine Frage, wenn Sie bereit sind zu helfen. In der beigefügten Fiddle können Sie sehen, ich habe den Cursor: Zeiger für den Hover-Status hinzugefügt. Wenn sich ein Benutzer über einen der Links bewegt, wird er sich an die Hand wenden. Bis auf die Unterkategorien (Kategorie 1,2 und 3) hat sich alles auf den Zeiger geändert. Wissen Sie, warum das so ist? - https://jsfiddle.net/num6t3x6/2/ – user6738171