Bootstrap 将复选框放在下拉列表中 [英] Bootstrap putting checkbox in a dropdown

问题描述

我正在尝试将一个复选框表单放在这样的下拉列表中:

<li class="下拉菜单"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下拉表单<b class="caret"></b></a><ul class="下拉菜单"><li><label class="checkbox"><input type="checkbox">两个</label></li><li><label class="checkbox"><input type="checkbox">两个</label></li>

这是一个

HTML

本质上，我们将寻求结合两组不同的 Bootstrap 控件 &样式:下拉菜单 &复选框.在每个 li 内部，我们将使用 label 而不是 a 元素，以便我们可以将复选框包裹在标签中 并使整行可点击.

<li ><标签><输入类型=复选框">起司

CSS

我们可以窃取一些通常应用于 .dropdown-menu li a 的样式，输入并将它们应用于我们的标签选项.我们将使标签占据容器的整个宽度并修复一些标签/复选框对齐问题.此外，我们将为 .active 和 :hover 添加样式.

.checkbox-menu li label {显示:块；填充:3px 10px；清楚:两者；字体粗细:正常；行高:1.42857143；颜色:#333；空白:nowrap；保证金:0;过渡:背景颜色 .4s 缓和；}.checkbox-menu li输入{边距:0px 5px；顶部:2px；位置:相对；}.checkbox-menu li.active 标签{背景颜色:#cbcbff；字体粗细:粗体；}.checkbox-menu li 标签:悬停，.checkbox-menu li label:focus {背景色:#f5f5f5；}.checkbox-menu li.active 标签:悬停，.checkbox-menu li.active label:focus {背景颜色:#b8b8ff；}

JavaScript

其他一些内务，我们将手动在每个列表项上保留一个 .active 类标志，以对应于该项目是否被选中，以便我们可以适当地设置样式.

$(".checkbox-menu").on("change", "input[type='checkbox']", function() {$(this).closest("li").toggleClass("active", this.checked);});

我们还希望通过停止菜单在内部点击事件上保持打开状态来允许多选冒泡事件

$(document).on('click', '.allow-focus', function (e) {e.stopPropagation();});

堆栈片段中的演示

$(".checkbox-menu").on("change", "input[type='checkbox']", function(){$(this).closest("li").toggleClass("active", this.checked);});$(document).on('click', '.allow-focus', function (e) {e.stopPropagation();});

body {填充:15px；}.checkbox-menu li 标签{显示:块；填充:3px 10px；清楚:两者；字体粗细:正常；行高:1.42857143；颜色:#333；空白:nowrap；保证金:0;过渡:背景颜色 .4s 缓和；}.checkbox-menu li输入{边距:0px 5px；顶部:2px；位置:相对；}.checkbox-menu li.active 标签{背景颜色:#cbcbff；字体粗细:粗体；}.checkbox-menu li 标签:悬停，.checkbox-menu li label:focus {背景色:#f5f5f5；}.checkbox-menu li.active 标签:悬停，.checkbox-menu li.active label:focus {背景颜色:#b8b8ff；}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="样式表"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script><div class="下拉"><button class="btn btn-default dropdown-toggle" type="button"id="dropdownMenu1" 数据切换="下拉"aria-haspopup="true" aria-expanded="true"><i class="glyphicon glyphicon-cog"></i><span class="caret"></span><ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu1"><li ><标签><输入类型=复选框">起司<li ><标签><输入类型=复选框">意大利辣香肠<li ><标签><输入类型=复选框">胡椒

I'm trying to put a checkbox form in a dropdown like this:

<ul>
  <li class="dropdown">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">
      Dropdown Form<b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><label class="checkbox"><input type="checkbox">Two</label></li>
      <li><label class="checkbox"><input type="checkbox">Two</label></li>
    </ul>
  </li>
</ul>

Here is a Demo in Bootply

However, as you can see in the demo, for whatever reason the actual checkbox itself appears outside of the dropdown menu. Can anyone tell me what's causing that, and how it should be implemented instead? If I take the label class out it works but it's all bunched up.

解决方案

Here's what we'll build:

HTML

Essentially, we'll look to combine two different sets of Bootstrap controls & styles: Dropdowns & Checkboxes. Inside of each li, we'll use a label instead of an a element, so that we can wrap the checkbox in a label and make the entire row clickable.

<ul class="dropdown-menu checkbox-menu allow-focus">
  <li >
    <label>
      <input type="checkbox"> Cheese
    </label>
  </li>
</ul>

CSS

We can steal some of the styles normally applied to .dropdown-menu li a, input and apply them to our label option instead. We'll make the label occupy the full width of the container and fix some label / checkbox alignment issues. Additionally, we'll add styles for .active and :hover.

.checkbox-menu li label {
    display: block;
    padding: 3px 10px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    margin:0;
    transition: background-color .4s ease;
}
.checkbox-menu li input {
    margin: 0px 5px;
    top: 2px;
    position: relative;
}

.checkbox-menu li.active label {
    background-color: #cbcbff;
    font-weight:bold;
}

.checkbox-menu li label:hover,
.checkbox-menu li label:focus {
    background-color: #f5f5f5;
}

.checkbox-menu li.active label:hover,
.checkbox-menu li.active label:focus {
    background-color: #b8b8ff;
}

JavaScript

Some other housekeeping, we'll manually keep an .active class flag on each list item to correspond to whether or not the item is checked so we can style it appropriately.

$(".checkbox-menu").on("change", "input[type='checkbox']", function() {
   $(this).closest("li").toggleClass("active", this.checked);
});

We'll also want to allow multiple selections by allowing the menu to stay open on internal click events by stopping the event from bubbling up

$(document).on('click', '.allow-focus', function (e) {
  e.stopPropagation();
});

Demo in Stack Snippets

$(".checkbox-menu").on("change", "input[type='checkbox']", function() {
   $(this).closest("li").toggleClass("active", this.checked);
});

$(document).on('click', '.allow-focus', function (e) {
  e.stopPropagation();
});

body {
  padding: 15px;
}

.checkbox-menu li label {
    display: block;
    padding: 3px 10px;
    clear: both;
    font-weight: normal;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    margin:0;
    transition: background-color .4s ease;
}
.checkbox-menu li input {
    margin: 0px 5px;
    top: 2px;
    position: relative;
}

.checkbox-menu li.active label {
    background-color: #cbcbff;
    font-weight:bold;
}

.checkbox-menu li label:hover,
.checkbox-menu li label:focus {
    background-color: #f5f5f5;
}

.checkbox-menu li.active label:hover,
.checkbox-menu li.active label:focus {
    background-color: #b8b8ff;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>



<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" 
          id="dropdownMenu1" data-toggle="dropdown" 
          aria-haspopup="true" aria-expanded="true">
    <i class="glyphicon glyphicon-cog"></i>
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu1">
  
    <li >
      <label>
        <input type="checkbox"> Cheese
      </label>
    </li>
    
    <li >
      <label>
        <input type="checkbox"> Pepperoni
      </label>
    </li>
    
    <li >
      <label>
        <input type="checkbox"> Peppers
      </label>
    </li>
    
  </ul>
</div>

这篇关于Bootstrap 将复选框放在下拉列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！