關于標記和樣式
<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代替floats
relative如果您打算生孩子，請務必讓父母處于有利位置（例如）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 插件來使用原型而不是復制分布式函數。如果您希望擴展功能，這將為您提供更好的組件封裝和靈活的定制選項。
