0
アイコンをクリックすると、1つのリスト（アイコンが押されている）だけを開く必要があります。どのようにして各リストを一意にすることができますか？助けてください！このコードでは、私は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 {
\t background-color: #fff;
\t display: block;
\t padding: 8px 20px 5px 10px;
\t min-height: 15px;
\t line-height: 24px;
\t overflow: hidden;
\t border: 0;
\t width: 152px;
\t border:1px solid black;
}*/
.filterDropdown dt a span,
.resultSelect span {
cursor: pointer;
display: inline-block;
color: #5795f9;
margin: 0 0 0 20px;
/* \t 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>
、あなたは問題が何であるかを説明することができますか？ –
@SergChernataアイコンをクリックすると3つのリストが開きます。私はその1つのクリックと1つのリストをしなければならない。含めていただきありがとうございます。 –
@SergChernataもう一度私を助けてくれますか？私が選んだ文章を書く必要があると、私はアイコンを押すと閉じるでしょう。 。 –