ドロップダウンチェックリストが機能しない

Question

私のブログのドロップダウンチェックボックスリストを作成しようとしていますが、何らかの理由でリストが閉じているボックスの1つをチェックしようとすると、どんな助けもありがとう。この要素は、単にチェックボックスが挿入されたスタイル付きのドロップダウンです。これは、アンカーがクリックされたとき、またはタグの外側の何かがクリックされたときに開くことを意味します。

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関数Iそれが消えるように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