打开的多选列表不正确(Incorrect open multiselect list)
当你点击图标时,只需要打开一个列表(按下哪个图标)。 如何使每个列表都独一无二? 请帮忙! 在这段代码中我使用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>When you click on the icon have to be opened only one list (which icon pressed). How can I do each list unique? Please help! In this code I use font-awesome, sorry about it, but I can't add it in this example.
$(".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>最满意答案
这太乱了。 我得到了这个,如果你想要更多的改变你必须指定。
$(".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>This is quite a mess. I got it this far, if you want more changes you'll have to specify.
$(".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>
更多推荐
发布评论