Twitter Bootstrap Dropdown schließt, wenn geklickt wird

Ich bekomme das nicht zur Arbeit. Das Dropdown-Menü schließt die ganze Zeit.Twitter Bootstrap Dropdown schließt, wenn geklickt wird

Ich möchte in der Lage sein, Nachricht aus dem Dropdown-Menü zu senden.

Ich habe sowohl bootstrap.js, bootstrap.css als auch bootstrap-responsive.css in die Kopfzeile eingefügt.

Wie kann ich dieses Dropdown nicht schließen?

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

Quelle

2012-11-22 Bjorn Ingi

In welchen Browsern haben Sie das getestet? –

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

Quelle

2012-11-22 23:57:57 salih0vicX

Nicht ganz sicher, ob das Hinzufügen von Form die Lösung ist. Sie möchten eine Seite erstellen, bei der nicht die gesamte Seite neu geladen werden muss, wenn Sie auf "Senden" klicken. – eandersson

Ich möchte kein Formular hinzufügen, da es bereits ein Formular-Tag für die ganze Seite gibt, Im mit .NET. Ich möchte auch in der Dropdown-Liste auf einen Link (Antwortlink senden) klicken können, der ein div sichtbar macht, das den Textbereich anzeigt. Wenn ich auf den Link drowpdown klicke, schließt sich. Was ich mache, zeigt Benutzern eingehende Nachrichten in einem Dropdown-Menü, und wenn sie die Nachricht aus dem Dropdown beantworten wollen, können sie das tun. –

Sie müssen richtig das Textfeld, um die stopPropagation() Methode wählen zu arbeiten. Versuchen Sie folgendes:

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

Auch Ihre TextArea- kein Kind eines ul Element sein kann, so ist es in einem li Listenelement statt.

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

Quelle

2012-11-23 01:47:52

Dieses Demo funktioniert großartig, aber ich brauche mehr. Ich bearbeite meine Frage oben mit dem, was ich brauche. Bitte hilf mir ... ;-) DANKE! –

@BjornIngi das gleiche Prinzip gilt immer noch, nur incase Ihre Dropdown-Inhalt in einem div und stoppen Sie die Verbreitung auf, http://jsfiddle.net/ENWFy/1/. –

Danke, Andres, das hat gut funktioniert! Ich habe gerade $ ('. Dropdown-menu .stayOpen') erstellt. Click (function (e) { e.stopPropagation(); }); und dann bla b lblblablabl Answer –

Zeit seit Antwort vergangen angenommen worden ist, aber wenn Sie der Drop-Down geöffnet halten wollen, wenn es wie eine Art Dialog wirkt, der beste Weg, ich denke, ist:

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

Quelle

2014-03-18 08:18:10 lavrik

die beste Antwort sein wird, ist Klick auszuführen, so dass es die gleiche handeln wird, wenn der Benutzer mit der Maus klicken sie auf den Dropdown-Menü auszublenden, um dieses Snap-Code dieser Artikel auf Ihrer Seite zu tun:

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

Quelle

2014-09-24 02:55:00

Sie können den Dropdown-Aufruf alle zusammen überspringen, das Bootstrap-Dropdown funktioniert ohne sie. Stellen Sie sicher, dass Sie das Skript korrekt umschließen. Sie können es in die Kopfzeile oder den Text Ihrer Seite einfügen, obwohl ich es persönlich bevorzuge, es in den Text Ihrer Seite einzufügen.

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

Quelle

2015-08-20 07:36:57 Nagender

Twitter Bootstrap Dropdown schließt, wenn geklickt wird

Antwort

Verwandte Themen