Twitter Bootstrap 下拉菜单在单击时关闭答案

【问题标题】：Twitter Bootstrap dropdown closes when clickedTwitter Bootstrap 下拉菜单在单击时关闭
【发布时间】：2012-11-22 23:43:51
【问题描述】：

我没有让这个工作。下拉菜单一直在关闭。

我希望能够从下拉菜单中发送消息。

我在标题中包含了bootstrap.js、bootstrap.css 和bootstrap-responsive.css。

我怎样才能让这个下拉菜单不关闭？

<head>
<script type='text/javascript'>//<![CDATA[
    $(window).load(function () {
        $('.dropdown-menu textarea a').click(function (e) {
            e.stopPropagation();
        });

    });

    function ShowDr(div) {
        $("#medr" + div).css("display", "block");
        $("#xdr" + div).focus();
    }

    //]]>  
</script>
</head>
<body>


 <ul class="nav">
   <li class="dropdown" data-dropdown="dropdown">
     <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">      Message 
     <b class="caret"></b></a>
     <ul class="dropdown-menu dropdown-menu-large">
        This is a message from the user John to Ann. If Ann wants to send an answer she will click the link. Then 
        the textarea will become visible. 
        <a href="javascript:void(0)" onclick="javascript:ShowDr('18')"><img src='/img/reply.gif'> Answer</a><br/>
        <div id="medr18" style="display:none" class="medr">            
            <li>
                <div style="padding:20px;">
                    <textarea name="xdr18" id="xdr18" class="textareasmall"></textarea> <br /><input type=button value="Send" class="btn btn-success btn-medium" onclick="GoM('2','Message sent')" />
                </div>
            </li>
         </div>
       </ul>     
   </li>
</ul>

【问题讨论】：

你在哪些浏览器上测试过这个？

标签： drop-down-menu twitter-bootstrap

【解决方案1】：

您需要正确选择文本区域才能使stopPropagation() 方法起作用。试试这个：

JS

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

此外，您的 textarea 不能是 ul 元素的子元素，因此请将其包含在 li 列表项中。

演示：http://jsfiddle.net/ENWFy/

【讨论】：

这个演示效果很好，但我需要更多。我用我需要的东西编辑我上面的问题。请帮助我...;-) 谢谢！
@BjornIngi 同样的原则仍然适用，只需将下拉内容放入 div 并停止传播，jsfiddle.net/ENWFy/1。
谢谢，安德烈斯，效果很好！我刚刚创建了 $('.dropdown-menu .stayOpen').click(function (e) { e.stopPropagation(); });然后 blalb lblblblablbl 回答
@BjornIngi 我很高兴它成功了。如果答案令人满意，请不要忘记将其标记为正确，以帮助将来有相同问题的用户。
为我工作；竖起大拇指！

【解决方案2】：

自答案被接受以来已经过去了一段时间，但如果你想保持下拉菜单打开，如果它像一种对话框一样，我认为最好的方法是：

$('.dropdown').dropdown().on("hide.bs.dropdown", function(e) {
           if ($.contains(dropdown, e.target)) {
                e.preventDefault();
            //or return false;
            }
        });

【讨论】：

【解决方案3】：

你缺少

标签：

<ul class="nav">
     <li class="dropdown" data-dropdown="dropdown">
        <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">    Message 
        <b class="caret"></b></a>
        <ul class="dropdown-menu dropdown-menu-large">
           <form>
             <textarea name="xd" id="xd" class="textareasmall"></textarea><br /><input type=button value="Send" class="btn btn-success btn-medium" onclick="GoM('2','Message sent')" />
           </form>
         </ul>     
    </li>
</ul>

【讨论】：

不太确定添加表单是解决方案。您想制作一个在点击send时不需要重新加载整个页面的页面。
我不想添加表单，因为整个页面已经有一个表单标签，我使用的是.NET。我还希望能够单击下拉列表中的链接（发送回复链接），使显示文本区域的 div 可见。当我单击链接以关闭下拉菜单时。我正在做的是在下拉列表中向用户显示传入的消息，如果他们想从下拉列表中回复消息，他们应该能够做到这一点。

【解决方案4】：

最好的答案是执行单击，这样它的行为与用户单击鼠标隐藏下拉菜单的行为相同，为此，请将此快照代码添加到您的页面：

<script>
    $(document).ready(function () {
        $("li.dropdown ul.dropdown-menu li").click(function (event) {
            event.toElement.parentElement.click();
        })
    })
</script>

【讨论】：

【解决方案5】：

您可以一起省略下拉调用，没有它，引导下拉菜单也可以工作。确保正确包装脚本，可以将其包含在页面的页眉或正文中，尽管我个人更喜欢将其放在页面的正文中。

$('.dropdown-menu input, .dropdown-menu label').click(function(e) {
    e.stopPropagation();
});

【讨论】：