我有一个下拉菜单，其中包含需要用户输入的元素(即一个菜单选项可以是汽车，文本形式是汽车的类型)。
子菜单代码:
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Cars</a>
<ul class="dropdown-menu">
<div class="col-sm-15 input-large">
<input class="form-control" type="text" id="sm ex0" placeholder="Car type">
</div>
</ul>
</li>
我目前正在使用带有子菜单的下拉菜单，该子菜单只是一种文本形式，但我读到如果可能的话应该寻找子菜单替代品。
这是什么惯例？我需要一种方法让用户从下拉菜单中输入内容。
最佳答案
这是一个包含单独输入的子菜单和下拉菜单的示例。
(function($) {
$(document).ready(function() {
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
width: 300px;
padding: 10px;
margin-left: 0;
}
.dropdown ul.simple-menu {
width: 300px;
padding: 10px;
margin-left: 0;
}
.dropdown ul.simple-menu form .form-group .form-control,
.dropdown ul.simple-menu form .form-group label,
.dropdown ul.simple-menu form .form-group .btn-primary {
margin: 5px 0;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.navbar .dropdown-submenu,
.navbar .dropdown-menu {
border-radius: 0;
box-shadow: none;
}
.dropdown-submenu form .form-group .form-control,
.dropdown-submenu form .form-group label,
.dropdown-submenu form .form-group .btn-primary {
margin: 5px 0;
}
@media (max-width: 768px) {
.dropdown-submenu form .form-group {
color: #fff;
padding: 20px
}
.dropdown-submenu > a:after {
float: right;
margin-right: 0px;
}
.dropdown ul.simple-menu form .form-group {
color: #fff;
padding: 20px
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Bootstrap</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Linked</a>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown 1<span class="caret"></span></a>
<ul class="dropdown-menu simple-menu">
<li>
<form name="dOne">
<div class="form-group">
<label for="car">Car</label>
<input class="form-control" type="text" name="car" />
</div>
</form>
</li>
<li>
<form name="dOne">
<div class="form-group">
<input class="form-control" type="text" name="car2" />
<input class="btn btn-primary" type="submit" name="submit" value="Submit" />
</div>
</form>
</li>
</ul>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown 2<span class="caret"></span></a>
<ul class="dropdown-menu simple-menu">
<li>
<form name="dOne">
<div class="form-group">
<label for="car3">Car</label>
<input class="form-control" type="text" name="car3" />
<input class="btn btn-primary" type="submit" name="submit" value="Submit" />
</div>
</form>
</li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Car 1</a>
<ul class="dropdown-menu">
<li>
<form name="One">
<div class="form-group">
<label for="car">Car</label>
<input class="form-control" type="text" name="car" />
<input class="btn btn-primary" type="submit" name="submit" value="Submit" />
</div>
</form>
</li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Car 2</a>
<ul class="dropdown-menu">
<li>
<form name="Two">
<div class="form-group">
<label for="car">Car</label>
<input class="form-control" type="text" name="car" />
<input class="btn btn-primary" type="submit" name="submit" value="Submit" />
</div>
</form>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 4<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Car 3</a>
<ul class="dropdown-menu">
<li>
<form name="Three">
<div class="form-group">
<label for="car">Car</label>
<input class="form-control" type="text" name="car" />
<input class="btn btn-primary" type="submit" name="submit" value="Submit" />
</div>
</form>
</li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Car 4</a>
<ul class="dropdown-menu">
<li>
<form name="Four">
<div class="form-group">
<label for="car">Car</label>
<input class="form-control" type="text" name="car" />
<input class="btn btn-primary" type="submit" name="submit" value="Submit" />
</div>
</form>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>关于javascript - 带有文本形式替代的 Bootstrap 子菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31887271/