问题描述
我有一个下拉菜单，其中包含需要用户输入的项目（即，一个菜单选项可以是汽车，其文本形式是汽车的类型）。
子菜单代码：
<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>
我目前正在使用带有子菜单的下拉菜单，该菜单只是一种文本形式，但是我读到如果可能的话，应该寻找替代子菜单。
这有什么约定？ 我需要一种让用户从下拉菜单中输入输入的方法。
1楼
这是一个仅包含一个输入的子菜单和下拉菜单示例。
(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>