内置输入的下拉菜单

时间:2015-05-09 14:53:30

标签: javascript jquery html css twitter-bootstrap

我想创建一个下拉菜单,将输入内部组合为我的图像,我使用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>

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

5 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

Official documentation应该帮助你

答案 3 :(得分:0)

只需添加:

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

答案 4 :(得分:0)

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