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下拉菜單被點擊時關閉

回答

相關問題