Question

我有一个菜单，其中有新的＆＃34;和＆＃34;类别＆＃34;当您按类别时，有3个类别下拉。当你按下这3个类别中的每一个时，它们都有子菜单。我的问题是如何才能使它如果点击一个类别，之前的类别就会消失。（例如，如果我打开类别1，然后单击类别2，则类别1的菜单将关闭）我建议使用单选按钮，但是我尝试使用无线电按钮替换所有复选框。那没起效。有没有人有任何解决方案？提前致谢。这是一个小提琴 - https://jsfiddle.net/fgkusnt9/

＆＃13;

<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>

＆＃13;

CSS

＆＃13;

.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;
}

＆＃13;

Answer 1

您需要将复选框更改为单选按钮，并为所有单选按钮指定相同的名称属性。这将使他们成为一个单独的组，同时将检查单个无线电。

     <ul id="subList">
        <li>
          <input type="checkbox" id="all" />
          <label id="allLabel" for="all">All</label>
        </li>
        <li>
          <input type="radio" name= "category"  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="radio" name= "category"  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="radio" name= "category" 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>

另外添加css来隐藏收音机，

input[type='radio'] {
  display: none;
}

.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='radio'] {
  display: none;
}

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;
}

<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="radio" name= "category"  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="radio" name= "category"  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="radio" name= "category" 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>

更新小提琴：https://jsfiddle.net/num6t3x6/

如何使用单选按钮而不是复选框

1 个答案: