主页 / 问题 / 735902
Accepted
r.mcreal
Asked:2020-10-26 03:03:48 +0800 CST2020-10-26 03:03:48 +0800 CST

从 <select> 到下拉菜单

  • 772

你好！在网站上，<select>需要在引导下重新制作它dropdown（不要问为什么））。那些。以便列表最初不可见，但仅在按下按钮后才可见。这是应该发生的事情的示例：在此处输入图像描述

那些。有一个按钮可以打开列表和列表本身。当您从列表中选择任何元素时，会发生 js 事件，因此您需要使用<select>

javascript

1 个回答

  1. Best Answer

    $('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;
}

option::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

option.grey::before {
  background: grey;
}

option.green::before {
  background: green;
}

option.yellow::before {
  background: yellow;
}
    <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>

    • 1

相关问题