Twitter Bootstrap下拉菜单被点击时关闭

我没有得到这个工作。下拉菜单始终关闭。Twitter Bootstrap下拉菜单被点击时关闭

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

我在标题中包含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>

来源

2012-11-22 Bjorn Ingi

你测试过哪些浏览器？ –

你缺少<形式>标签：

<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>

来源

2012-11-22 23:57:57 salih0vicX

不太确定添加表单是否是解决方案。您希望创建一个页面，当点击'send'时，不需要重新加载整个页面。 – eandersson

我不想添加表单，因为已经有整个页面的表单标签，我使用.NET。我还希望能够在下拉菜单中点击链接（发送回复链接），使div可见并显示textarea。当我点击链接到下降关闭。我正在做的是在下拉菜单中向用户显示传入消息，如果他们想从下拉菜单回答消息，他们应该可以做到这一点。 –

你需要为了正确选择文本区域为stopPropagation()方法工作。试试这个：

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

此外，您的textarea不能是ul元素的一个孩子，所以包括它li列表项内代替。

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

来源

2012-11-23 01:47:52

这个演示效果很好，但我需要更多。我用我需要的编辑上面的问题。请帮助我...... ;-)谢谢！ –

@BjornIngi同样的原则仍然适用，只需将您的下拉内容放在div中并停止传播即可，http：//jsfiddle.net/ENWFy/1/。 –

谢谢，安德烈斯，这工作得很好！我刚刚创建了$（'。dropdown-menu.stayOpen'）。click（function（e）{e.stopPropagation（）; }）;然后 blalb lblblblablbl Answer –

因为答案时间的流逝被接受的，但如果你想保持下拉打开，如果它的作用就像是一种对话，我认为最好的办法是：

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

来源

2014-03-18 08:18:10 lavrik

最好的答案会是执行点击所以它会采取同样的用户点击鼠标即可隐藏下拉菜单中，要做到这一点添加此卡代码添加到网页：

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

来源

2014-09-24 02:55:00

您可以一起省略下拉电话，引导程序下拉菜单在没有它的情况下工作。确保你正确包装你的脚本，你可以将它包含在页面的标题或正文中，尽管我个人更喜欢将它放在页面主体上。

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

来源

2015-08-20 07:36:57 Nagender

Twitter Bootstrap下拉菜单被点击时关闭

回答

相关问题