我在一些Html和CSS代码中遇到问题,我想做多选下拉菜单,但我遇到了问题。
我想做的是这样的事情:
我到目前为止所做的是
这是我的Html代码:
<div class="btn-group">
<button type="button" class="multiselect dropdown-toggle btn btn-default"
data-toggle="dropdown" title="Columns">
Columns
<b class="caret">
</b>
</button>
<ul class="dropdown-menu">
<li>
<label class="checkbox">
<input type="checkbox" name="multiselect" value="cheese">Cheese</input>
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox" name="multiselect" value="tomatoes">Tomatoes</input>
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox" name="multiselect" value="mozarella">Mozzarella</input>
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox" name="multiselect" value="mushrooms">Mushrooms</input>
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox" name="multiselect" value="pepperoni">Pepperoni</input>
</label>
</li>
<li>
<label class="checkbox">
<input type="checkbox" name="multiselect" value="onions">Onions</input>
</label>
</li>
</ul>
</div>
和我的css代码:
ul.dropdown-menu {
height: auto;
width: auto;
}
ul.dropdown-menu li {
height: auto;
width: auto;
}
ul.dropdown-menu li label {
display: block;
padding-left: 40px;
}
我的问题是,当我选择任何复选框输入时,该块会消失,我应该再次打开它以选择值!
我需要一些帮助
答案 0 :(得分:4)
您可以尝试这样
$(document).on('click', '.dropdown-menu', function (e) {
e.stopPropagation(); // it will not propagate the action to parent for closing
});
答案 1 :(得分:0)
Text-indent为负数,因此它会拉动复选框。请删除该属性,看看会发生什么。
答案 2 :(得分:0)
它可以帮助你:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<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"><span class="caret"></span>Choose
</button>
<ul class="dropdown-menu">
<li>
<input type="checkbox" name="multiselect" value="cheese">Cheese</input>
</li>
<li>
<input type="checkbox" name="multiselect" value="tomatoes">Tomatoes</input>
</li>
<li>
<input type="checkbox" name="multiselect" value="mozarella">Mozzarella</input>
</li>
<li>
<input type="checkbox" name="multiselect" value="mushrooms">Mushrooms</input>
</li>
<li>
<input type="checkbox" name="multiselect" value="pepperoni">Pepperoni</input>
</li>
<li>
<input type="checkbox" name="multiselect" value="onions">Onions</input>
</li>
</ul>
</div>
</div>
</div>
</div>