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

Question

我创建了一个多选下拉列表，用户通过单击每个选项的复选框来选择选项。它仅适用于一个这样的下拉菜单，但我需要在一页上有很多很多这样的下拉菜单。有人知道如何更改代码来实现这一目标吗？这是此https://codepen.io/chaser7016/pen/yLNGWYb的代码笔。下面，我还添加了在 codepen 中看到的 html/css/jquery。$('.dropdown-container')  .on('click', '.dropdown-button', function() {        $(this).siblings('.dropdown-list').toggle();  })  .on('input', '.dropdown-search', function() {      var target = $(this);        var dropdownList = target.closest('.dropdown-list');      var search = target.val().toLowerCase();          if (!search) {            dropdownList.find('li').show();            return false;        }          dropdownList.find('li').each(function() {          var text = $(this).text().toLowerCase();            var match = text.indexOf(search) > -1;            $(this).toggle(match);        });  })  $('.dropdown-list input[type="checkbox"]').on('click', function () {                  var title = $(this).closest('.dropdown-list').find('input[type="checkbox"]').val(),              title = $(this).val() + ",";                  if ($(this).is(':checked')) {              var html = '<span title="' + title + '">' + title + '</span>';              $('.quantity').append(html);              $(".hida").hide();          }           else {              $('span[title="' + title + '"]').remove();              var ret = $(".hida");              $('.dropdown dt a').append(ret);                        }      });.dropdown-button {    width: 100%;    background: white;    cursor: pointer;    padding: 19px;    box-sizing: border-box;    border: 1px solid;  }    .dropdown-label, .dropdown-quantity {        float: left;        font-family: 'Ubuntu', sans-serif;    }        .dropdown-quantity {        margin-left: 4px;    }    input[type="search"] {        padding: 5px;        width: 100%;        margin: 3px 0 8px;    }

Answer 1

关于标记和样式

• <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 插件来使用原型而不是复制分布式函数。如果您希望扩展功能，这将为您提供更好的组件封装和灵活的定制选项。