内置输入的下拉菜单

Question

我想创建一个下拉菜单，将输入内部组合为我的图像，我使用bootstrap

<i>
 <div class="btn-group dropdown" dropdown >
          <button type="button" class="btn btn-default" dropdown-toggle>
            Dropdown
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" id="buttonuser"  role="menu">
            <li>
                <p>Add to</p>
                <input type="text" id="findUser" class="form-control">
            </li>
            <li><a href>Dropdown link</a></li>
            <li><a href>Dropdown link</a></li>
            <li><a href>Dropdown link</a></li>
            <li>Remove</li>
          </ul>
        </div>
</i>

但是当我点击输入时，菜单下拉隐藏所有，我不想要这个，请告诉我我是怎么做的

Answer 1

尝试将此脚本放在正文末尾或JS的位置

之前

<script type="text/javascript">
    $('.dropdown-menu input, .dropdown-menu label').click(function(e) {
        e.stopPropagation();
    });
</script>

Answer 2

<script type="text/javascript">
 $('#findUser').click(function(e) {
        e.stopPropagation();
    });
</script> 

Answer 3

Official documentation应该帮助你

Answer 4

只需添加：

$('.dropdown-menu li').click(function(e) {
    e.stopPropagation();
});

Answer 5

如果您使用的是bootstrap 3.3.5，则默认情况下这是有效的。