首页 > 编程入门 文章详情

打开的多选列表不正确(Incorrect open multiselect list)

编程入门 行业动态 更新时间:2024-10-27 14:25:03
打开的多选列表不正确(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>

更多推荐

本文发布于:2023-08-06 08:05:00，感谢您对本站的认可！
本文链接:https://www.elefans.com/category/jswz/34/1445265.html
版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文标签：不正确   多选   列表   Incorrect   multiselect

发布评论

评论列表 （有 0 条评论）

最近发表

草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍！

热门文章

标签列表