单击后，Bootstrap Dropdowns 不显示菜单答案

【问题标题】：Bootstrap Dropdowns doesn't show the menu after clicking单击后，Bootstrap Dropdowns 不显示菜单
【发布时间】：2016-07-09 16:20:17
【问题描述】：

这些是代码 sn-ps。下拉菜单不起作用。也尝试了其他方法，但没有成功。我只想从这些代码中解决问题。

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>

【问题讨论】：

检查您的 JavaScript 控制台是否有错误。

标签： javascript html twitter-bootstrap dropdown

【解决方案1】：

您错过了包含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>

【讨论】：

【解决方案2】：

根据错误，您似乎没有将 jQuery 导入到您的 html 中。

【讨论】：