Bootstrap toggle collapse - halten Sie das Formular offen, bis Sie erneut die Umschalttaste drücken

Ich erstelle ein Registrierungsformular, das 2 Teile enthält, wo der Benutzer Informationen eingeben kann, aber ich möchte, dass sie zusammenklappbar sind. Momentan konnte ich die Formulare öffnen und schließen. Ein Formular wird geöffnet, wenn auf eine Schaltfläche geklickt wird. Wenn Sie jedoch an einer anderen Stelle auf der Seite klicken, wird es wieder geschlossen.Bootstrap toggle collapse - halten Sie das Formular offen, bis Sie erneut die Umschalttaste drücken

Zur Klarstellung: Formular öffnet, wenn auf Schaltfläche klicken, wird auf anderswo klicken, die ein Schmerz ist, weil Sie ein Eingabefeld als das Formular so schnell schließt wählen kann nicht, wie Sie anderswo klicken.

Wie gehst du vor, dass der Schalter zum Reduzieren der Einblendung beibehalten wird, bis du erneut auf die Schaltfläche klickst?

Code:

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

Bin ich offensichtlich etwas fehlt? Ich bin ziemlich neu, aber ich konnte nichts, was ich online gefunden habe, zur Arbeit bringen.

Quelle

2016-04-01 fakeaccount

hallo, könnten Sie schreiben einen jsfiddle? –

-1

Es ist schwer zu sagen, aber es sollte gut funktionieren. Das eine Ding kommt mir nur in den Sinn. Vielleicht hast du etwas falsch mit deinem CSS.

Vielleicht sind Sie schlecht positioniert diese Schaltfläche, die es Bereich Abdeckung ganze div ist #user_info Versuchen Sie dies unter Entwickler-Tools zu überprüfen.

Ich setze diesen Code und es funktioniert gut, unabhängig davon, dass Tasten so schlecht positioniert sind.

Wenn Sie die Lösung benötigen that makes div beeing still collapsed even while clicking the button again ich die Antwort auf diese Frage hier gestellt haben

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; 
} 
});

Quelle

2016-06-09 10:26:34 mamosek

Während dieser Link die Frage beantworten kann, ist es besser, die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz bereitzustellen. Nur-Link-Antworten können ungültig werden, wenn sich die verknüpfte Seite ändert. - [Aus Bewertung] (/ review/low-quality-posts/12632932) – Suresh

Oh sorry, guter Punkt. Ich werde die Antwort bearbeiten. – mamosek

Bootstrap toggle collapse - halten Sie das Formular offen, bis Sie erneut die Umschalttaste drücken

Antwort

Verwandte Themen