我想允许在列表组中选择多个按钮

Posted 2023-03-05

【中文标题】我想允许在列表组中选择多个按钮

【英文标题】：I want to allow multiple buttons to be selected in List group

【发布时间】：2018-11-27 01:32:26

【问题描述】：

这是我的代码，下拉菜单也没有显示下拉项目。 它不显示下拉项目。帮助我，这将非常有帮助。 我还想允许多个按钮选择，包括更改我选择的每个按钮的颜色

 .list-group-horizontal .list-group-item 
    display: inline-block;
    

.list-group-horizontal .list-group-item:focus 
    display: inline-block;
    color:#fff;
    background-color: #41AADA !important; 


.list-group-horizontal .list-group-item 
	margin-bottom: 0;
	margin-left:-4px;
    margin-right: 0;
   

.list-group-horizontal .list-group-item:first-child 
	border-top-right-radius:0;
    border-bottom-left-radius:4px;
   

.list-group-horizontal .list-group-item:last-child 
	border-top-right-radius:4px;
    border-bottom-left-radius:0;
    

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="form-check list-inline list-group-horizontal" data-toggle="list-group-item"> 
        <button type="checkbox" id="btnGroupDrop1" type="button"  class="dropdown-toggle list-group-item" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            2018
          </button>
          <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
            <a class="dropdown-item" href="#">2017</a>
            <a class="dropdown-item" href="#">2016</a>
          </div>
      <button type="checkbox" class="form-check list-group-item">Quater 1</button>
      <button type="checkbox" class="form-check list-group-item">Quater 2</button>
      <button type="checkbox" class="form-check list-group-item">Quater 3</button>
      <button type="checkbox" class="form-check list-group-item">Quater 4</button>
  </div>

【参考方案1】：

您可以尝试以下解决方案：

.list-group-horizontal .list-group-item 
  display: inline-block; 

.list-group-horizontal .list-group-item:focus 
  background-color: #41AADA !important; 
  color:#fff;
  display: inline-block;

.list-group-horizontal .list-group-item 
  margin-bottom: 0;
  margin-left:-4px;
  margin-right: 0;

.list-group-horizontal .list-group-item:first-child 
  border-top-right-radius:0;
  border-bottom-left-radius:4px;  

.list-group-horizontal .list-group-item:last-child 
  border-top-right-radius:4px;
  border-bottom-left-radius:0;   

.form-check label 
  padding:.75rem 1.25rem;
  margin-bottom:0;

.form-check label input[type="checkbox"] 
  opacity:0;

<!-- include the CSS files -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- include the JavaScript files -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<!-- the html -->
<div class="form-check list-inline list-group-horizontal btn-group" role="group" data-toggle="buttons"> 
  <button type="checkbox" id="btnGroupDrop1" type="button"  class="dropdown-toggle list-group-item" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-toggle="buttons">
    2018
  </button>
  <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
    <a class="dropdown-item" href="#">2017</a>
    <a class="dropdown-item" href="#">2016</a>
  </div>
  <label class="btn btn-light">
    <input type="checkbox" class="form-check list-group-item">Quater 1
  </label>
  <label class="btn btn-light">
    <input type="checkbox" class="form-check list-group-item">Quater 2
  </label>
  <label class="btn btn-light">
    <input type="checkbox" class="form-check list-group-item">Quater 3
  </label>
  <label class="btn btn-light">
    <input type="checkbox" class="form-check list-group-item">Quater 4
  </label>
</div>

【讨论】：

我已经在我的解决方案中复制了您的代码，但我的下拉菜单仍然无法正常工作。我需要知道 popper.js 和 boostrap.js 的顺序。因为我的独奏中没有下拉菜单正在工作，而且多选按钮。我正在使用 Angular。