Trình đơn thả xuống Twitter Bootstrap đóng lại khi được nhấp vào

Tôi không làm việc này. Trình đơn thả xuống luôn đóng cửa.Trình đơn thả xuống Twitter Bootstrap đóng lại khi được nhấp vào

Tôi muốn có thể gửi tin nhắn từ trình đơn thả xuống.

Tôi bao gồm cả bootstrap.js, bootstrap.css và bootstrap-responsive.css trong tiêu đề.

Làm cách nào để có được menu thả xuống này không đóng?

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

Nguồn

2012-11-22 Bjorn Ingi

Bạn đã thử nghiệm trình duyệt này trên trình duyệt nào? –

Bạn đang thiếu < dạng > 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>

Nguồn

2012-11-22 23:57:57 salih0vicX

Không hoàn toàn chắc chắn rằng việc thêm biểu mẫu là giải pháp. Bạn muốn tạo một trang không yêu cầu toàn bộ trang được tải lại khi nhấp vào 'gửi'. – eandersson

Tôi không muốn thêm biểu mẫu, vì đã có thẻ biểu mẫu cho toàn bộ trang, tôi đang sử dụng .NET. Tôi cũng muốn có thể nhấp vào liên kết (Gửi liên kết trả lời) trong danh sách thả xuống để hiển thị div hiển thị văn bản. Khi tôi nhấp vào liên kết để drowpdown đóng. Những gì tôi đang làm hiển thị cho người dùng thư đến trong danh sách thả xuống và nếu họ muốn trả lời thư từ menu thả xuống, họ có thể thực hiện điều đó. –

Bạn cần phải chọn đúng textarea để các stopPropagation() phương pháp để làm việc. Hãy thử điều này:

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

Ngoài ra, textarea của bạn không thể là một con của một yếu tố ul, vì vậy bao gồm nó bên trong một mục danh sách li để thay thế.

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

Nguồn

2012-11-23 01:47:52

Bản trình diễn này hoạt động rất tốt, nhưng tôi cần nhiều hơn. Tôi chỉnh sửa câu hỏi của mình ở trên với những gì tôi cần. Xin hãy giúp tôi ... ;-) THANKS! –

@BjornIngi nguyên tắc tương tự vẫn được áp dụng, chỉ cần trong nội dung thả xuống của bạn bên trong một div và dừng việc tuyên truyền trên đó, http://jsfiddle.net/ENWFy/1/. –

Cảm ơn, Andres, điều đó đã hoạt động tốt! Tôi vừa tạo ra $ ('. Dropdown-menu .stayOpen'). Click (function (e) { e.stopPropagation(); }); và sau đó blalb lblblblablbl Answer –

Thời gian trôi qua kể từ câu trả lời đã được chấp nhận, nhưng nếu bạn muốn giữ lại thả xuống mở ra, nếu nó hoạt động như một loại hộp thoại, cách tốt nhất tôi nghĩ là:

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

Nguồn

2014-03-18 08:18:10 lavrik

câu trả lời tốt nhất sẽ là để thực hiện nhấp chuột để nó sẽ hoạt động giống như người dùng nhấp chuột để ẩn menu thả xuống, để làm điều này thêm mã Snap này vào trang của bạn:

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

Nguồn

2014-09-24 02:55:00

Bạn có thể bỏ qua tất cả các cuộc gọi thả xuống, trình đơn thả xuống bootstrap hoạt động mà không có nó. Hãy chắc chắn rằng bạn đang gói kịch bản của bạn đúng cách, bạn có thể bao gồm nó trên tiêu đề hoặc cơ thể của trang của bạn, mặc dù cá nhân tôi thích đặt nó trên cơ thể của trang của bạn.

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

Nguồn

2015-08-20 07:36:57 Nagender

Trình đơn thả xuống Twitter Bootstrap đóng lại khi được nhấp vào

Trả lời

Các vấn đề liên quan