Question

我有一个带下拉列表的按钮。

Example: jsfiddle

正如您所见，列表是可滚动的，但我想在底部添加按钮，它应该是固定的。我怎么能做到这一点？

Answer 1

按下ul之后的按钮，只滚动ul：

    <div class="dropdown-menu">
     <ul>
  <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>
<button>btn</button>
     </div>

如果您在CSS中设置较小的ul，则可以看到它：

    ul{
  overflow:hidden;
  overflow-y:scroll;
  height: 100px; 
}

这里： fiddle

Answer 2

您是否尝试添加选项但应该是按钮？把它放在清单上还是没有

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

ul{
  overflow:hidden;
  overflow-y:scroll;
  height: 150px; 
}

<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">Select 
          <i class="caret"></i>
        </button>
        <div class="dropdown-menu">
        <ul>
          <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>
          <li><a href="#" class="small" data-value="some-option7" tabIndex="-1"><input type=button value="something"></a></li>
        </ul>
        <a href="#" class="small" data-value="some-option7" tabIndex="-1"><input type=button value="something-else"></a>
        </div>
      </div>
    </div>
  </div>
</div>

带有固定按钮的可滚动列表

2 个答案: