使用 twitter-bootstrap 下拉菜单作为容器答案

【问题标题】：Use twitter-bootstrap dropdown menu as a container使用 twitter-bootstrap 下拉菜单作为容器
【发布时间】：2013-12-18 08:54:34
【问题描述】：

是否可以防止下拉菜单在“点击”时消失。尝试使用下拉菜单作为文本区域的容器。

例如

<div class="row-fluid">
    <div class="span12">
        <div class="btn-group">
            <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#">
                <strong id="revolver">
                    <i class="icon-envelope"></i>&nbsp
                    <span class="caret"></span>
                </strong>
            </a>
            <ul class="dropdown-menu">
                <div class="row-fluid send-message-textarea">
                    <div class="span12">
                        <textarea></textarea>
                        <br>
                        <button class="btn btn-mini"><strong>Send</strong></button>
                    </div>
                </div>
            </ul>
        </div>
    </div>
</div>

编辑：

我想在 bootstrap.js 中复制粘贴下拉功能，然后更改选择器并删除不需要的功能可能是一种选择。我查看了https://github.com/twitter/bootstrap/blob/master/js/bootstrap-dropdown.js，但我无法确定具体功能的确切位置。将获得帮助。

【问题讨论】：

标签： html twitter-bootstrap drop-down-menu

【解决方案1】：

在您的 HTML 中，将 id 添加到 <ul>

<ul class="dropdown-menu" id="test">

添加一个防止下拉菜单响应点击的处理程序

$(document).ready(function() {
    $("#test").click(function(e) {
       e.stopPropagation();
    });
});

您现在可以在文本区域中单击和编辑。

【讨论】：