2013-08-19 5 views
7

他の質問を同様に見て、解決策の多くを試しましたが、何も働いていません。ここに問題があります。トップバナーのミニログインフォームです。フィールドをクリックするとボタンが自動的に閉じないようにする必要があります。ここに私のコードです:Twitter Bootstrap cantは、クリックして閉じるとドロップダウンを停止します

<script> 
    $(document).on('click', '.dropdown-menu', function(e){ 
     $(this).hasClass('keep_open') && e.stopPropagation(); // This replace if conditional. 
    }); 
    ​</script>     
    <div class="btn-group" > 
     <a class="btn btn-small btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"> 
     <i class="cus-key"></i> Login 
     <span class="caret"></span> 
     </a> 
     <ul class="dropdown-menu pull-right keep_open"> 
     <form action="clog.php" method="post" class="keep_open"> 
     <!-- dropdown menu links --> 
      <li><input type="text" placeholder="Username..." class="keep_open" /></li> 
      <li><input type="text" placeholder="Password..." class="keep_open"/></li> 
      <li><input type="submit" name="submit" style="background-image: url('img/login.png'); width: 110px; height: 32px; cursor: hand; margin-top: -5px" value=" " /></li> 
      <li><a href="/riders/register.php" ><span style="color: green; float: right" > Sign up for account<i class="icon-double-angle-right"></i></a></span></li> 
     </form> 
     </ul> 
    </div> 
+0

停止伝播が機能していないようです。私は絶望的にすべてのものにクラスを加えました! – srt8driver

+0

あなたは問題を再現する[fiddle](http://jsfiddle.net)を提供できますか? –

+0

http://jsfiddle.net/X5xTX/(フィドルには新しく、私はそれが正しいとは確信していません) – srt8driver

答えて

3

私がこの構文を借用ブートストラップ3のドロップダウン・メニュー内にネストされたアコーディオン/切り替えサブメニューと同じ問題を抱えていました

$(document).on(
    'click.bs.dropdown.data-api', 
    '[data-toggle="collapse"]', 
    function (e) { e.stopPropagation() } 
); 

あなたは、あなたがフォームを閉じる停止したいものは何でもして例えば[data-toggle="collapse"]を置き換えることができます。ドロップダウンリストを閉じてから、すべての崩壊のトグルを停止するsource code別のクラスまたは別のデータプロパティ。

+0

これは正解です。 [data-toggle = "collapse"]はメニューAND bodyの特定のクラスに置き換えることができます(BODY内の任意の場所をクリックするとドロップダウンも閉じます)。例えば、 'main_menu、body' – Steven

18

私はそれを考え出しました。ドキュメントレディ機能の内部にはありませんでした。 (Koala_devへの帽子先端) Javascriptがする必要があります:

<script type="text/javascript"> 

    $(document).ready(function() { 
     $(document).on('click', '.dropdown-menu', function (e) { 
      $(this).hasClass('keep_open') && e.stopPropagation(); // This replace if conditional. 
     }); 
    }); 
    </script> 
関連する問題