ブートストラップの折りたたみトグル - フォームを開いたままトグルボタンをクリックするまで

ユーザーが情報を入力できる場所に2つの部分が含まれている登録フォームを作成していますが、折りたたみ可能にします。現在私はフォームを開いたり閉じたりすることができました。ボタンをクリックするとフォームが開きますが、ページの他の場所をクリックするとフォームが再び閉じます。ブートストラップの折りたたみトグル - フォームを開いたままトグルボタンをクリックするまで

明確にする：ボタンをクリックするとフォームが開き、それ以外の場所をクリックするとすぐにフォームが閉じるので、入力ボックスを選択できないため、痛みがあります。

ボタンをもう一度クリックするまで、折りたたみトグルを作成するにはどうすればよいですか？

コード：

<head> 
... 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
... 
</head> 
<body> 
<div class="modal-body"> 
    <form role="form" action="<?=admin_url('admin-ajax.php')?>" method="post" id="register-form" autocomplete="off"> 
     <div> 
      <h4>User Info</h4> 
       <span class="btn reg-org pull-right"> 
        <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#user_info"> 
         <span class="caret"></span> 
        </button> 
       </span> 
      <div id="user_info" class="collapse"> 

      //FORM CONTENT 

      </div> 
     </div> 
     <hr> 
     <div> 
      <h4>Further Info</h4> 
       <span class="btn reg-org pull-right"> 
        <button type="button" class="btn btn-default" data-toggle="collapse" data-target="#further_info"> 
         <span class="caret"></span> 
        </button> 
       </span> 
      <div id="further_info" class="collapse"> 

      //FORM CONTENT 

      </div> 
     </div> 
    </form> 
</div> 
</body>

私は明らかに何かが足りないのですか？私はこれにかなり新しいですが、私は動作するように私が見つけたものは得られませんでした。

出典

2016-04-01 fakeaccount

やあ、あなたはjsfiddleを書くだろうか？ –

-1

言いにくいですが、うまくいくはずです。一つだけが私の心に来ている。あなたのCSSに何か問題があるかもしれません。

多分このエリアのカバー全体のdivであるこのボタンを配置している#user_info これは開発者ツールの下でこれをチェックしてみてください。

私はこのコードを書いていますが、それはボタンが非常に間違っているにもかかわらずうまく動作します。

あなたが解決that makes div beeing still collapsed even while clicking the button againが必要な場合は、私がここにこの質問への答えを入れている

Keeping an uncollapsed element open if it's parent is clicked on again

$('.btn').click(function(e) { 
target = $(this).data('target'); 
if($(target).is(':visible')){ 
    return false; 
} 
});

出典

2016-06-09 10:26:34 mamosek

このリンクは質問に答えるかもしれませんが、ここでは答えの重要な部分を含めて参考にしてください。リンクされたページが変更された場合、リンクのみの回答は無効になります。 - [レビューより]（/レビュー/低品質の投稿/ 12632932） – Suresh

ああ申し訳ありませんが、良い点。回答を編集します。 – mamosek

ブートストラップの折りたたみトグル - フォームを開いたままトグルボタンをクリックするまで

答えて

関連する問題