主页 / 问题 / 736100
Accepted
r.mcreal
Asked:2020-10-26 17:25:18 +0000 UTC2020-10-26 17:25:18 +0000 UTC

展开选择

  • 772

你好！该站点有几个使用循环显示的选择。每个选择都应在单击特定按钮时展开（使用 js 和 css）。到目前为止，只有打开所有选择，但不是单独打开。那些。最后应该是这样的，点击Цвет一个所有颜色都掉的列表，其余的列表不显示。PS循环中的选择数量可以改变，即 并不总是等于三

$('body').on('click', '.bnt', function(event) {
  event.preventDefault();
  $('.dropdown').toggle();
})

$('body').on('click', '.dropdown', function(event) {
  event.preventDefault();
  $('.dropdown').toggle();
})
select {
  overflow: hidden;
  border: none;
  text-transform: uppercase;
}

option {
  line-height: 20px;
  padding: .5rem 1rem;
  position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>


<div class="bnt">ЦВЕТ</div>
<div class="dropdown" style="display: none">
  <select size="3" class="color" name="color">
  <option value="grey" class="grey">белый</option>
  <option value="yellow" class="yellow">желтый</option>
  <option value="green" class="green">зеленый</option>
</select>
</div>


<div class="bnt">Форма</div>
<div class="dropdown" style="display: none">
  <select size="3" class="color" name="color">
  <option value="grey" class="grey">Шар</option>
  <option value="yellow" class="yellow">Куб</option>
  <option value="green" class="green">Конус</option>
</select>


</div>



<div class="bnt">Содержимое</div>
<div class="dropdown" style="display: none">
  <select size="3" class="color" name="color">
  <option value="grey" class="grey">Текст1</option>
  <option value="yellow" class="yellow">Текст2</option>
  <option value="green" class="green">Текст3</option>
</select>


</div>

javascript

2 个回答

  1. 类似的东西。没有 JS。如果您希望能够同时保持多个选择打开，只需type="radio"插入即可type="checkbox"

    ul{
  cursor:pointer;
}
li, input{
  display:none;
}
input:checked + ul li{
  display: block;
}
    <label>
    <input type="radio" name="select">
    <ul>Select №1
      <li>Раз</li>
      <li>Два</li>
      <li>Три</li>
    </ul>
  </label>
  <label>
    <input type="radio" name="select">
    <ul>Select №2
      <li>Три</li>
      <li>Два</li>
      <li>Раз</li>
  </ul>
  </label>
  <label>
    <input type="radio" name="select">
    <ul>Select №3
      <li>1</li>
      <li>2</li>
      <li>3</li>
  </ul>
  </label>

    • 5
  2. Best Answer
    $('body').on('click', '.bnt', function(event) {
  event.preventDefault();
  $(this).next().toggle();
})

 $('body').on('click', '.dropdown', function(event) {
  event.preventDefault();
  $(this).toggle();
})

    演示

    • 2

相关问题