我试图在下拉列表中放置一个复选框表单,如下所示:
<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>
然而,正如您在演示中看到的,无论出于什么原因,实际的复选框本身都会出现在下拉框之外。有人能告诉我是什么导致了这种情况,以及应该如何实现它吗?如果我把标签类去掉,它是有效的,但它都被捆绑在一起了。
我认为一个简单的解决办法是,
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
id="sampleDropdownMenu" data-toggle="dropdown">
Dropdown
</button>
<div class="dropdown-menu">
<button class="dropdown-item" type="button">
<input type="checkbox">Action
</button>
<button class="dropdown-item" type="button">
<input type="checkbox">Action
</button>
<button class="dropdown-item" type="button">
<input type="checkbox">Action
</button>
</div>
</div>
Bootstrap在其文档中使用复选框的方式如下:
<div class="checkbox">
<label>
<input type="checkbox">Two
</label>
</div>
所以你的看起来像:
<ul>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown Form<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<div class="checkbox">
<label>
<input type="checkbox">Two
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox">Two
</label>
</div>
</li>
</ul>
</li>
</ul>
文件:http://getbootstrap.com/css/#forms
本质上,我们将结合两组不同的引导控件
<ul class="dropdown-menu checkbox-menu allow-focus">
<li >
<label>
<input type="checkbox"> Cheese
</label>
</li>
</ul>
我们可以窃取一些通常应用于. dropdown菜单li a
的样式,将它们输入并应用于我们的标签选项。我们将使标签占据容器的整个宽度并修复一些标签/复选框对齐问题。此外,我们将为. active
和添加样式:悬停
。
.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;
}
其他一些家务,我们将手动保存一个<代码>。每个列表项上的活动类标志,对应于是否选中该项,以便我们可以对其进行适当的样式设置。
$(".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 {
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>
如何将引导标签放在复选框下面? null null 我得到这个结果 但我想要这个结果 如果我首先添加更多的我会得到这个(上面更多的空间)
我的引导菜单中有下拉列表。 我试图在下拉列表中选择选项作为下拉列表的标题,而不是“选择选项”,就像现在一样。我已经尝试了在这个和其他一些网站上找到的几个解决方案,但无法使它们中的任何一个工作。 有人能帮忙吗?
我正在rails中使用引导下拉列表,它突然停止工作。如果我像它工作正常,但如果我真的单击它,什么也不会发生。 如果我使用jQuery附加了一个单击处理程序,如,然后当我单击链接时触发。 这是不是因为事件被什么东西吞没了?有没有办法弄清楚这是什么? 我不能在jsFiddle类型的环境中重现错误,但这里是相关的html: 更新:我发现如果我调用页面加载几秒钟后,它就可以工作了,但如果我在页面加载时正确
问题内容: 有人可以确认其 不 能够改变,当你点击一个选择框,显示一个下拉的高度。 select的size属性使其看起来像一个列表,CSS中的height属性也没有太大用。 问题答案: 已确认。 下拉部分设置为: 显示所有条目所需的高度,或者 需要显示的高度项(带有滚动条来查看剩余),其中是 在Firefox和Chrome中为20 在IE 6、7、8中为30 Opera 10为16 Opera 1
本文向大家介绍JS设置下拉列表框当前所选值的方法,包括了JS设置下拉列表框当前所选值的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS设置下拉列表框当前所选值的方法。分享给大家供大家参考,具体如下: 1. JS代码: 2.在JSP中设置下拉列表框的当前选择项 希望本文所述对大家JavaScript程序设计有所帮助。
我的代码如下: WebElement stateDropDown=驱动程序。findElement(By.xpath(“/html/body/form/div[3]/main/div/div/div/span/div/fieldset/div[4]/div[1]/span/span[1]”);列表选项=状态下拉列表。findElements(By.xpath(“/html/body/div[1]/