Bootstrap Dropdowns zeigt das Menü nicht nach dem Klicken

Question

Dies sind die Code-Schnipsel. Das Dropdown-Menü funktioniert nicht. Andere Methoden versucht, aber konnte nicht erfolgreich sein. Ich möchte die Probleme nur von diesen Codes lösen.

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; 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-lg-12">  
 
    <div class="button-group"> 
 
    <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">Choose an item: 
 
    <span class="caret"></span></button> 
 
    <ul class="dropdown-menu"> 
 
     <li><a href="#" class="small" data-value="option1" tabindex="-1"><input type="checkbox" />Chicken Steam Momo</a></li> 
 
     <li><a href="#" class="small" data-value="option2" tabindex="-1"><input type="checkbox" />Chicken Fried Momo</a></li> 
 
     <li><a href="#" class="small" data-value="option2" tabindex="-1"><input type="checkbox" />Chicken Kothey Momo</a></li> 
 
    </ul> 
 
    </div> 
 
    </div> 
 
    </div>

Answer 1

Gemäß der Fehler, scheint Sie nicht die jQuery in Ihre HTML importiert haben.

Answer 2

Du verpasst die Bootstrap.js ...

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; 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-lg-12">  
 
    <div class="button-group"> 
 
    <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">Choose an item: 
 
    <span class="caret"></span></button> 
 
    <ul class="dropdown-menu"> 
 
     <li><a href="#" class="small" data-value="option1" tabindex="-1"><input type="checkbox" />Chicken Steam Momo</a></li> 
 
     <li><a href="#" class="small" data-value="option2" tabindex="-1"><input type="checkbox" />Chicken Fried Momo</a></li> 
 
     <li><a href="#" class="small" data-value="option2" tabindex="-1"><input type="checkbox" />Chicken Kothey Momo</a></li> 
 
    </ul> 
 
    </div> 
 
    </div> 
 
    </div>