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

关于标记和样式<label>Hello world</label>在未引用 FormActionElement 的情况下不应使用Label like将复选框和标签文本包裹起来，<label>以便两者都可单击使用CSS.is-active类.is-hidden来描述状态对箭头使用::before伪 with并使用（分配给组件下拉列表）来处理箭头状态 content:.is-active当为同一目的使用多个复选框时，请使用名称属性，name="states[]"以便您可以捕获states数组中的所有选定值。使用data-*属性 likedata-name="Long name"来存储预览名称。使用 CSSflex代替floatsrelative如果您打算生孩子，请务必让父母处于有利位置（例如）absolute关于 JavaScript.each() 通过使用jQuery 创建一个函数来处理所有自定义下拉菜单$dropdown.each(UI_dropdown); // Apply logic to all dropdowns比在该函数内部始终引用子元素作为this下拉列表的子集，以防止定位DOM 中的$('.dropdown-button', this);每个元素'.dropdown-button'确保添加一个处理程序来document关闭活动下拉菜单如果打开另一个下拉菜单，还要确保关闭一个下拉菜单：const $dropdown = $('.dropdown-container'); // Cache all;function UI_dropdown() { const $this = $(this); const $btn = $('.dropdown-button', this); const $list = $('.dropdown-list', this); const $li = $('li', this); const $search = $('.dropdown-search', this); const $ckb = $(':checkbox', this); const $qty = $('.dropdown-quantity', this); $btn.on('click', function() { $dropdown.not($this).removeClass('is-active'); // Close other $this.toggleClass('is-active'); // Toggle this }); $search.on('input', function() { const val = $(this).val().trim(); const rgx = new RegExp(val, 'i'); $li.each(function() { const name = $(this).text().trim(); $(this).toggleClass('is-hidden', !rgx.test(name)); }); }); $ckb.on('change', function() { const names = $ckb.get().filter(el => el.checked).map(el => { return `<span class="dropdown-sel">${el.dataset.name.trim()}</span>`; }); $qty.html(names.join('')); });}$dropdown.each(UI_dropdown); // Apply logic to all dropdowns// Dropdown - Close opened $(document).on('click', function(ev) { const $targ = $(ev.target).closest('.dropdown-container'); if (!$targ.length) $dropdown.filter('.is-active').removeClass('is-active');});/* QuickReset */ * { margin: 0; box-sizing: border-box; }.dropdown-container { position: relative;}.dropdown-label { padding: 4px 10px 4px 0;}.dropdown-label:before { content: "\25BC";}.dropdown-container.is-active .dropdown-label:before { content: "\25B2";}.dropdown-button { cursor: pointer; padding: 10px; border: 1px solid #d5d5d5; background: white; display: flex; flex-flow: row wrap;}.dropdown-quantity { flex: 1; display: flex; flex-flow: row wrap;}.dropdown-sel { display: inline-block; background: #eee; border-radius: 3em; padding: 2px 10px; margin: 0 3px 3px 0;}.dropdown-list { position: absolute; overflow-y: auto; z-index: 9999999; top: calc( 100% - 2px); width: 100%; max-height: 80vh; padding: 10px; padding-top: 0; border: 1px solid #d5d5d5; border-top: 0; background: white; display: none;}.dropdown-container.is-active .dropdown-list { display: block;}.dropdown-list input[type="search"] { padding: 5px; display: block; width: 100%;}.dropdown-list ul { padding: 0; padding-top: 10px; list-style: none;}.dropdown-list li { padding: 0.24em 0;}input[type="checkbox"] { margin-right: 5px;}/* HELPER CLASSES */.noselect { user-select: none; }.is-hidden { display: none; }<div class="dropdown-container"> <div class="dropdown-button noselect"> <div class="dropdown-label">STATES:</div> <div class="dropdown-quantity"></div> </div> <div class="dropdown-list"> <input type="search" placeholder="Search states" class="dropdown-search"> <ul> <li> <label><input value="AL" name="states[]" data-name="Alabama" type="checkbox">Alabama</label> </li> <li> <label><input value="AK" name="states[]" data-name="Alaska" type="checkbox">Alaska</label> </li> <li> <label><input value="AS" name="states[]" data-name="American Samoa" type="checkbox">American Samoa</label> </li> <li> <label><input value="AZ" name="states[]" data-name="Arizona" type="checkbox">Arizona</label> </li> <li> <label><input value="AR" name="states[]" data-name="Arkansas" type="checkbox">Arkansas</label> </li> <li> <label><input value="CA" name="states[]" data-name="California" type="checkbox">California</label> </li> <li> <label><input value="CO" name="states[]" data-name="Colorado" type="checkbox">Colorado</label> </li> <li> <label><input value="CT" name="states[]" data-name="Connecticut" type="checkbox">Connecticut</label> </li> </ul> </div></div><div class="dropdown-container"> <div class="dropdown-button noselect"> <div class="dropdown-label">POSITIONS:</div> <div class="dropdown-quantity"></div> </div> <div class="dropdown-list"> <input type="search" placeholder="Search positions" class="dropdown-search"> <ul> <li> <label><input value="be" name="positions[]" data-name="Backend" type="checkbox">Backend</label> </li> <li> <label><input value="fr" name="positions[]" data-name="Frontend" type="checkbox">Frontend</label> </li> <li> <label><input value="hr" name="positions[]" data-name="HR" type="checkbox">HR</label> </li> <li> <label><input value="de" name="positions[]" data-name="Arizona" type="checkbox">Designer</label> </li> </ul> </div></div><script src="https://code.jquery.com/jquery-3.1.0.js"></script>如果你想进一步优化代码，你可以通过创建jQuery 插件来使用原型而不是复制分布式函数。如果您希望扩展功能，这将为您提供更好的组件封装和灵活的定制选项。

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

1回答