Question

我正在尝试为我的博客创建一个下拉复选框列表，但出于某种原因，只要尝试检查列表关闭的其中一个框。任何帮助，将不胜感激。该元素只是一个带有复选框的样式下拉列表。它意味着在单击锚点或单击标签外部的东西时打开。

HTML

<input type="text" value="" name="ne" id="sign-up"/>
<div id="list1" class="dropdown-check-list" tabindex="100">
  <span class="anchor">Tags</span>
  <ul class="items">
    <li><input type="checkbox" name="nl1" value="1"checked ></li>
    <li><input type="checkbox" name="nl2" value="2" checked ></li>
    <li><input type="checkbox" name="nl3" value="3" checked ></li>
    <li><input type="checkbox" name="nl4" value="4" checked ></li>
    <li><input type="checkbox" name="nl4" value="5" checked >Projects</li>
    <li><input type="checkbox" name="nl5" value="6" checked ></li>
    <li><input type="checkbox" name="nl6" value="7" checked ></li>
  </ul>
</div>      
<input type="submit" id="signup-submit" value="sign up" />

CSS

.dropdown-check-list {
  display: inline-block;
  color:#49494b;
  background-color:#f0efeb;
  margin-left: -5px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding-top: 6px;
  padding-bottom: 9px;
  padding-right: 10px;
  padding-left: 5px;
}

.dropdown-check-list .anchor:after {
  position: absolute;
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
}
.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}
.dropdown-check-list ul.items {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
  position: absolute;
  background-color:#fff;
}
.dropdown-check-list ul.items li {
  list-style: none;
} 
.dropdown-check-list.visible .anchor {
  color: #000;
}
.dropdown-check-list.visible .items {
  display: block;
}

Jquery的

var checkList = document.getElementById('list1');
checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
  if (checkList.classList.contains('visible'))
    checkList.classList.remove('visible');
  else
    checkList.classList.add('visible');
  }

  checkList.onblur = function(evt) {
    checkList.classList.remove('visible');
  }
}

Answer 1

onblur函数正在移除visible类，因此它会消失。您可以删除onblur功能代码并重试。要删除的代码：

checkList.onblur = function(evt) {
    checkList.classList.remove('visible');
}

或者只是评论并尝试。

Answer 2

HTML：

<br/>
<div class="container">
<div class="row">
   <div class="col-lg-12">
 <div class="button-group">
    <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> <span  class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 1</a></li>
<li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 2</a></li>
<li><a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 3</a></li>
<li><a href="#" class="small" data-value="option4" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 4</a></li>
<li><a href="#" class="small" data-value="option5" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 5</a></li>
<li><a href="#" class="small" data-value="option6" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 6</a></li>
</ul>
</div>
 </div>
  </div>
     </div>

JQUERY：

var options = [];

$( '.dropdown-menu a' ).on( 'click', function( event ) {

var $target = $( event.currentTarget ),
   val = $target.attr( 'data-value' ),
   $inp = $target.find( 'input' ),
   idx;

 if ( ( idx = options.indexOf( val ) ) > -1 ) {
  options.splice( idx, 1 );
  setTimeout( function() { $inp.prop( 'checked', false ) }, 0);
 } else {
  options.push( val );
  setTimeout( function() { $inp.prop( 'checked', true ) }, 0);
 }

  $( event.target ).blur();

   console.log( options );
   return false;
  });

注意：需要在页面中添加引导程序样式和脚本

jsfiddle Example

下拉列表无法正常工作

2 个答案: