CODEWITHSUNDEEP
drop-down-menutwitter-bootstrap
Bjorn Ingi
Bjorn Ingi

Reputation: 61

Twitter Bootstrap dropdown closes when clicked

I am not getting this to work. The dropdown is closing all the time.

I want to be able to send message from the dropdown menu.

I included both bootstrap.js, bootstrap.css and bootstrap-responsive.css in the header.

How can I get this dropdown not to close ?

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

Upvotes: 6

Views: 9160

Answers (5)

Nagender
Nagender

Reputation: 1

You can omit the dropdown call all together, the bootstrap dropdown works without it. Make sure you're wrapping your script properly, you can include it on the header or body of your page, although personally i prefer placing it on the body of your page.

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

Upvotes: 0

Akram Kamal Qassas
Akram Kamal Qassas

Reputation: 509

the best answer will be is to perform click so it will act the same as the user click the mouse to hide the drop-down menu, to do this add this snap code to your page:

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

Upvotes: 0

lavrik
lavrik

Reputation: 1474

Time passed since answer had been accepted, but if you want to keep the dropdown opened, if it acts like a kind of dialog, the best way i think is:

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

Upvotes: 2

Andres I Perez
Andres I Perez

Reputation: 75379

You need to properly select the textarea in order for the stopPropagation() method to work. Try this:

JS

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

Also, your textarea cannot be a child of a ul element, so include it inside a li list item instead.

Demo: http://jsfiddle.net/ENWFy/

Upvotes: 11

salih0vicX
salih0vicX

Reputation: 1373

You are missing <form> tag: 

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

Upvotes: 1

Related Questions