主页 / coding / 问题 / 78581822
Accepted
bilpor
Asked: 2024-06-05 22:46:02 +0800 CST

带有复选框 css 的多个下拉菜单

  • 772

我想做的就是在选择标签时切换“toggle-content”类。目前，以下 CSS 没有任何反应。我无法使用 JQuery 或任何 JavaScript。我看不到我做错了什么。任何想法都非常感激。

/* The checkbox */
.hidden-checkbox {
   display: block;
}

/* The element to show/hide */
 .toggle-content {
    display: none;
    z-index: 2;
    position: absolute;
    background-color: dimgrey;
    color: white;
    border: black;
    border-width: 1px;
    border-style: solid;
    border-radius: 5px;
    padding: 3px;
}

/* The label that controls the element */
.label-toggle {
    cursor: pointer;
}

/* Show the element when the checkbox is checked */
.hidden-checkbox:checked + .toggle-content {
    display: block;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    max-height: 100px;
    padding-right: 10px
}

li {
    padding-top: calc(var(--bs-gutter-y)* -1);
    padding-right: calc(var(--bs-gutter-x)* -.5);
    padding-left: calc(var(--bs-gutter-x)* -.5);
    font-size: small;
}
li:hover {
    background-color: darkgrey;
}
<div>
    <label for="toggleVendors" class="label-toggle form-control">
        click here
    </label>
    <div type="checkbox" id="toggleVendors" class="hidden-checkbox" />
        <div class="toggle-content">
            <ul>
                <li><input type="checkbox" id="1" />one</li>
                <li><input type="checkbox" id="2" />two</li>
                <li><input type="checkbox" id="3" />three</li>
            </ul>
        </div>
    </div>

html

2 个回答

  1. Div 并不是他们不能拥有的输入type: checkbox。

    换一个合适的input

    /* The checkbox */

.hidden-checkbox {
  display: none;
}


/* The element to show/hide */

.toggle-content {
  display: none;
  z-index: 2;
  position: absolute;
  background-color: dimgrey;
  color: white;
  border: black;
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
  padding: 3px;
}


/* The label that controls the element */

.label-toggle {
  cursor: pointer;
}


/* Show the element when the checkbox is checked */

.hidden-checkbox:checked+.toggle-content {
  display: block;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  max-height: 100px;
  padding-right: 10px
}

li {
  padding-top: calc(var(--bs-gutter-y)* -1);
  padding-right: calc(var(--bs-gutter-x)* -.5);
  padding-left: calc(var(--bs-gutter-x)* -.5);
  font-size: small;
}

li:hover {
  background-color: darkgrey;
}
    <div>
  <label for="toggleVendors" class="label-toggle form-control">
    click here
  </label>
  <input type="checkbox" id="toggleVendors" class="hidden-checkbox">
  <div class="toggle-content">
    <ul>
      <li><input type="checkbox" id="1" />one</li>
      <li><input type="checkbox" id="2" />two</li>
      <li><input type="checkbox" id="3" />three</li>
    </ul>
  </div>
</div>

    • 0
  2. Best Answer

    您必须使用实际的复选框，而不是 div。要将复选框与标签组合，请在复选框上使用适当的 ID，以便您可以单击文本来切换复选框

    /* The checkbox */

.hidden-checkbox {
  display: none;
}


/* The element to show/hide */

.toggle-content {
  display: none;
  z-index: 2;
  position: absolute;
  background-color: dimgrey;
  color: white;
  border: black;
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
  padding: 3px;
}


/* The label that controls the element */

.label-toggle {
  cursor: pointer;
}


/* Show the element when the checkbox is checked */

.hidden-checkbox:checked+.toggle-content {
  display: block;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  max-height: 100px;
  padding-right: 10px
}

li {
  padding-top: calc(var(--bs-gutter-y)* -1);
  padding-right: calc(var(--bs-gutter-x)* -.5);
  padding-left: calc(var(--bs-gutter-x)* -.5);
  font-size: small;
}

li:hover {
  background-color: darkgrey;
}
    <div>
  <label for="toggleVendors" class="label-toggle form-control">
        click here
    </label>
  <input type="checkbox" id="toggleVendors" class="hidden-checkbox">
  <div class="toggle-content">
    <ul>
      <li><input type="checkbox" id="1" />one</li>
      <li><input type="checkbox" id="2" />two</li>
      <li><input type="checkbox" id="3" />three</li>
    </ul>
  </div>
</div>

    • 0

相关问题