6

これが機能していません。ドロップダウンは常に閉じています。

ドロップダウンメニューからメッセージを送信できるようにしたい。

とヘッダーの両方を含めbootstrap.jsました。bootstrap.cssbootstrap-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>
4

5 に答える 5

11

stopPropagation()メソッドを機能させるには、テキストエリアを適切に選択する必要があります。これを試して：

JS

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

ulまた、テキストエリアを要素の子にすることはできないため、li代わりにリスト項目内に含めてください。

デモ: http://jsfiddle.net/ENWFy/

于 2012-11-23T01:47:52.483 に答える
2

回答が受け入れられてから時間が経過しましたが、ドロップダウンを開いたままにしたい場合、それが一種のダイアログのように機能する場合、私が考える最良の方法は次のとおりです。

$('.dropdown').dropdown().on("hide.bs.dropdown", function(e) {
           if ($.contains(dropdown, e.target)) {
                e.preventDefault();
            //or return false;
            }
        });
于 2014-03-18T08:18:10.250 に答える
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>
于 2012-11-22T23:57:57.007 に答える