打开的多选列表不正确

Question

当你点击图标时，只需要打开一个列表（按下哪个图标）。我怎样才能使每个列表都独一无二？请帮忙！在这段代码中我使用font-awesome，对不起，但我不能在这个例子中添加它。

$(".filterBlock .filter-ico").on('click', function() {
  $(".filterDropdown dd ul").slideToggle('fast');
});


$(".filterDropdown dd ul li a").on('click', function() {
  $(".filterDropdown dd ul").hide();
});


function getSelectedValue(id) {
  return $("#" + id).find("dt a span.value").html();
}

$(document).bind('click', function(e) {
  var $clicked = $(e.target);
  if (!$clicked.parents().hasClass("filterDropdown")) $(".filterDropdown dd ul").hide();
});

$('.multiselect input[type="checkbox"]').on('click', function() {

  var title = $(this).closest('.mutliselect').find('input[type="checkbox"]').val(),
  title = $(this).val() + ",";

  if ($(this).is(':checked')) {
    var html = '<span title="' + title + '">' + title + '</span>';
    $('.resultSelect').append(html);
    $(".resultFilter").hide();
} else {
    $('span[title="' + title + '"]').remove();
    var ret = $(".resultFilter");
    $('.filterDropdown dt a').append(ret);

}
});

.filters {
  width: 20%;
  height: 100%;
  background-color: #fff;
  border-right: 1px solid #f7f7f7;
  position: relative;
  display: inline-block;
}
.filterBlock {
  margin: 0 0 50px 0;
  position: relative;
}
.filterBlock h3 {
  margin: 30px 0 0 40px;
  color: #a6a6a6;
  font: 16px Helvetica;
}
.filterBlock .filter-ico {
  position: absolute;
  left: 100px;
  font-size: 25px;
  color: #5795f9;
  cursor: pointer;
}
.filterBlock .filter-ico.sphere {
  left: 190px;
}
.filterBlock .filter-ico.show {
  left: 200px;
}
.filterDropdown {
  position: absolute;
  top: 10px;
  left: 20px;
  z-index: 5;
  transform: translateY(-10%);
  transform: translateX(10%);
}
.filterDropdown a {
  color: #5795f9;
}
.filterDropdown dd,
.filterDropdown dt {
  margin: 0px;
  padding: 0px;
}
.filterDropdown ul {
  margin: -1px 0 0 0;
}
.filterDropdown dd {
  position: relative;
}
.filterDropdown a,
.filterDropdown a:visited {
  color: #5795f9;
  text-decoration: none;
  outline: none;
  font-size: 12px;
}
/*.filterDropdown dt a {
	background-color: #fff;
	display: block;
	padding: 8px 20px 5px 10px;
	min-height: 15px;
	line-height: 24px;
	overflow: hidden;
	border: 0;
	width: 152px;
	border:1px solid black;
}*/

.filterDropdown dt a span,
.resultSelect span {
  cursor: pointer;
  display: inline-block;
  color: #5795f9;
  margin: 0 0 0 20px;
  /*	padding: 0 6px 2px 0;*/
}
.filterDropdown dd ul {
  background-color: #fff;
  border: 0;
  color: #5795f9;
  display: none;
  left: 0px;
  padding: 2px 15px 2px 5px;
  position: absolute;
  top: 2px;
  width: 180px;
  border: 1px solid black;
  box-shadow: 0 0 10px 0 rgba(0, 0.5, 0, 0);
  border-left: none;
  border-top: none;
  list-style: none;
  height: 100px;
  overflow: auto;
}
.filterDropdown span.value {
  display: none;
}
.filterDropdown dd ul li a {
  padding: 5px;
  display: block;
}
.filterDropdown dd ul li a:hover {
  background-color: #5795f9;
}

<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class = "filters">

      <div class = "filterBlock city">
        <h3>Регіон</h3>

        <span class = "filter-ico city"><i class = "fa fa-caret-down" aria-hidden="true"></i></span>
        <dl class = "filterDropdown first">
          <dt>
            <a href=""> <span class = "resultFilter"></span></a>

            <p class = "resultSelect"></p>

          </dt>
          <dd>
            <div class = "multiselect">
              <ul>

                <li><input type="checkbox" value="Київ">Київ</li>
                <li><input type="checkbox" value="Київ">Київ</li>
                <li><input type="checkbox" value="Київ">Київ</li>
              </ul>
            </div>
          </dd>

        </dl>

      </div>

      <div class = "filterBlock sphere">
        <h3>Сфера діяльності</h3>

        <span class = "filter-ico sphere"><i class = "fa fa-caret-down" aria-hidden="true"></i></span>
        <dl class = "filterDropdown first">
          <dt>
            <a href=""> <span class = "resultFilter"></span></a>

            <p class = "resultSelect"></p>

          </dt>
          <dd>  
            <div class = "multiselect">
              <ul>

                <li><input type="checkbox" value="Судова система">Судова система</li>
                <li><input type="checkbox" value="Прокуратура">Прокуратура</li>
              </ul>
            </div>
          </dd>

        </dl>

      </div>

      <div class = "filterBlock show">
        <h3>Показувати спочатку</h3>

        <span class = "filter-ico show"><i class = "fa fa-caret-down" aria-hidden="true"></i></span>
        <dl class = "filterDropdown first">
          <dt>
            <a href=""> <span class = "resultFilter"></span></a>

            <p class = "resultSelect"></p>

          </dt>
          <dd>
            <div class = "multiselect">
              <ul>

                <li><input type="checkbox" value="Осіб з більшим показником ризику">Осіб з більшим показником ризику</li>
                <li><input type="checkbox" value="Осіб з меньшим показником ризику">Осіб з меньшим показником ризику</li>

              </ul>
            </div>
          </dd>

        </dl>

      </div>
    </section>

Answer 1

这太乱了。我得到了这个，如果你想要更多的改变，你必须指定。

$(".filterBlock .filter-ico").on('click', function() {
  $(this).parent().find('dl').toggle('fast');
});


$(".filterDropdown dd ul li a").on('click', function() {
  $(this).parent('dl').hide();
});


function getSelectedValue(id) {
  return $("#" + id).find("dt a span.value").html();
}

$(document).bind('click', function(e) {
  var $clicked = $(e.target);
  //if (!$clicked.parents().hasClass("filterDropdown")) $(".filterDropdown dd ul").hide();
});

$('.multiselect input[type="checkbox"]').on('click', function() {

  var title = $(this).closest('.mutliselect').find('input[type="checkbox"]').val(),
  title = $(this).val() + ",";

  if ($(this).is(':checked')) {
    var html = '<span title="' + title + '">' + title + '</span>';
    $('.resultSelect').append(html);
    $(".resultFilter").hide();
} else {
    $('span[title="' + title + '"]').remove();
    var ret = $(".resultFilter");
    $('.filterDropdown dt a').append(ret);

}
});

.filters {
  width: 20%;
  height: 100%;
  background-color: #fff;
  border-right: 1px solid #f7f7f7;
  position: relative;
  display: inline-block;
}
.filterBlock {
  margin: 0 0 50px 0;
  position: relative;
}
.filterBlock h3 {
  margin: 30px 0 0 40px;
  color: #a6a6a6;
  font: 16px Helvetica;
}
.filterBlock .filter-ico {
  position: absolute;
  left: 100px;
  font-size: 25px;
  color: #5795f9;
  cursor: pointer;
  z-index: 10000;
}
.filterBlock .filter-ico.sphere {
  left: 190px;
}
.filterBlock .filter-ico.show {
  left: 200px;
}
.filterDropdown {
  position: absolute;
  overflow: hidden;
  top: 10px;
  left: 20px;
  z-index: 5;
  display: none;
  transform: translateY(-10%);
  transform: translateX(10%);
}
.filterDropdown a {
  color: #5795f9;
}
.filterDropdown dd,
.filterDropdown dt {
  margin: 0px;
  padding: 0px;
}
.filterDropdown ul {
  margin: -1px 0 0 0;
}
.filterDropdown dd {
  position: relative;
}
.filterDropdown a,
.filterDropdown a:visited {
  color: #5795f9;
  text-decoration: none;
  outline: none;
  font-size: 12px;
}
/*.filterDropdown dt a {
	background-color: #fff;
	display: block;
	padding: 8px 20px 5px 10px;
	min-height: 15px;
	line-height: 24px;
	overflow: hidden;
	border: 0;
	width: 152px;
	border:1px solid black;
}*/

.filterDropdown dt a span,
.resultSelect span {
  cursor: pointer;
  display: inline-block;
  color: #5795f9;
  margin: 0 0 0 20px;
  /*	padding: 0 6px 2px 0;*/
}
.filterDropdown dd ul {
  background-color: #fff;
  border: 0;
  color: #5795f9;
  left: 0px;
  padding: 2px 15px 2px 5px;
  top: 2px;
  width: 180px;
  border: 1px solid black;
  box-shadow: 0 0 10px 0 rgba(0, 0.5, 0, 0);
  border: none;
  border-top: none;
  list-style: none;
  height: 100px;
  overflow: auto;
}
.filterDropdown span.value {
  display: none;
}
.filterDropdown dd ul li a {
  padding: 5px;
  display: block;
}
.filterDropdown dd ul li a:hover {
  background-color: #5795f9;
}

<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class = "filters">

      <div class = "filterBlock city">
        <h3>Регіон</h3>

        <span class = "filter-ico city"><i class = "fa fa-caret-down" aria-hidden="true"></i></span>
        <dl class = "filterDropdown first">
          <dt>
            <a href=""> <span class = "resultFilter"></span></a>

            <p class = "resultSelect"></p>

          </dt>
          <dd>
            <div class = "multiselect">
              <ul>

                <li><input type="checkbox" value="Київ">Київ</li>
                <li><input type="checkbox" value="Київ">Київ</li>
                <li><input type="checkbox" value="Київ">Київ</li>
              </ul>
            </div>
          </dd>

        </dl>

      </div>

      <div class = "filterBlock sphere">
        <h3>Сфера діяльності</h3>

        <span class = "filter-ico sphere"><i class = "fa fa-caret-down" aria-hidden="true"></i></span>
        <dl class = "filterDropdown first">
          <dt>
            <a href=""> <span class = "resultFilter"></span></a>

            <p class = "resultSelect"></p>

          </dt>
          <dd>  
            <div class = "multiselect">
              <ul>

                <li><input type="checkbox" value="Судова система">Судова система</li>
                <li><input type="checkbox" value="Прокуратура">Прокуратура</li>
              </ul>
            </div>
          </dd>

        </dl>

      </div>

      <div class = "filterBlock show">
        <h3>Показувати спочатку</h3>

        <span class = "filter-ico show"><i class = "fa fa-caret-down" aria-hidden="true"></i></span>
        <dl class = "filterDropdown first">
          <dt>
            <a href=""> <span class = "resultFilter"></span></a>

            <p class = "resultSelect"></p>

          </dt>
          <dd>
            <div class = "multiselect">
              <ul>

                <li><input type="checkbox" value="Осіб з більшим показником ризику">Осіб з більшим показником ризику</li>
                <li><input type="checkbox" value="Осіб з меньшим показником ризику">Осіб з меньшим показником ризику</li>

              </ul>
            </div>
          </dd>

        </dl>

      </div>
    </section>