logo标签列表

Twitter Bootstrap下拉菜单在点击后关闭

drop-down-menutwitter-bootstrap
6
我无法让下拉菜单正常工作，它总是自动关闭。
我想要能够从下拉菜单中发送消息。
我在头部包含了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>
您在哪些浏览器上测试过这个？ - Mike Pennington
5个回答
11

要让 stopPropagation() 方法发挥作用，您需要正确选择文本区域。请尝试以下操作：

JS

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

此外，您的文本区域不能是 ul 元素的子级，因此请将其放在 li 列表项内。

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

这个演示非常好，但我需要更多。我已经在上面编辑了我的问题，说明我需要什么。请帮帮我...;-) 谢谢！ - Bjorn Ingi
@BjornIngi 相同的原则仍然适用，只是在 div 中放置下拉内容并停止传播，http://jsfiddle.net/ENWFy/1/. - Andres Ilich
谢谢，Andres，这很好用！我刚刚创建了$('.dropdown-menu .stayOpen').click(function (e) { e.stopPropagation(); }); 然后 <span class="stayOpen">blalb lblblblablbl <a href="javascript:void(0)" onclick="javascript:ShowDr('20')"><img src='/img/reply.gif'> 回答</a> </span> - Bjorn Ingi
@BjornIngi，我很高兴它起作用了。如果答案令人满意，请不要忘记将其标记为正确的答案，以帮助未来有相同问题的用户。 - Andres Ilich
对我有用，赞一个！ - Muneer
2

虽然答案已经被接受了一段时间，但如果您想保持下拉菜单的打开状态，如果它像一种对话框，我认为最好的方法是：

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

您缺少<form>标签：

<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>
不太确定添加表单是否是解决方案。您想要创建一个页面，当单击“发送”时不需要重新加载整个页面。 - eandersson
我不想添加表单，因为整个页面已经有一个表单标签了，我正在使用.NET。我还想能够点击下拉列表中的链接（发送回复链接），以使显示文本区域的div可见。当我点击链接时，下拉菜单关闭。我的目的是在下拉列表中显示用户收到的消息，如果他们想要从下拉列表回复消息，他们应该能够这样做。 - Bjorn Ingi
0

最好的答案是执行点击操作，这样它就会像用户点击鼠标一样隐藏下拉菜单。要做到这一点，请将以下代码添加到您的页面：

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

你可以完全省略下拉调用，Bootstrap下拉菜单也可以正常工作。确保你的脚本包裹得当，可以将其放在页面的头部或主体中，尽管个人而言，我更喜欢放在页面主体中。

$('.dropdown-menu input, .dropdown-menu label').click(function(e) {
    e.stopPropagation();
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接