javascript - 带有文本形式替代的 Bootstrap 子菜单？

Question

我有一个下拉菜单，其中包含需要用户输入的元素(即一个菜单选项可以是汽车，文本形式是汽车的类型)。

子菜单代码:

<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>

我目前正在使用带有子菜单的下拉菜单，该子菜单只是一种文本形式，但我读到如果可能的话应该寻找子菜单替代品。

这是什么惯例？我需要一种方法让用户从下拉菜单中输入内容。

Answer 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>