下拉菜单 – 单击Twitter Bootstrap下拉列表时关闭

发布时间：2020-12-18 00:24:23 所属栏目：安全来源：网络整理

导读：我没有让这个工作.下拉列表一直在关闭. 我希望能够从下拉菜单中发送消息. 我在头文件中包含了bootstrap.js,bootstrap.css和bootstrap-responsive.css. 如何才能让这个下拉菜单关闭？ headscript type='text/javascript'//![CDATA[ $(window).load(function (

我没有让这个工作.下拉列表一直在关闭.

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

我在头文件中包含了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>

解决方法

您需要正确选择textarea才能使stopPropagation()方法起作用.试试这个：

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!