jquery Toggle-Funktion funktioniert nicht

Question

Ich mache ein Formular, das mit Hilfe der Schaltfläche (ausblenden und anzeigen) wechseln, aber es funktioniert nicht. Kann jemand meinen Code bitte überprüfen und erklären, warum mein Skript nicht funktioniert. mein Code unter

$(document).ready(function() { 
 
     $("#add_facility").click(function() { 
 
      $("#facility-form").toggle('slow'); 
 
     }); 
 
    }); 
 
\t

\t .facility-form { 
 
     background-color: #e3edfa; 
 
     padding: 4px; 
 
     cursor: initial; 
 
     display: none; 
 
    }

<button class="btn" id="add_facility"> 
 
    <i class="fa fa-plus" aria-hidden="true"></i> 
 
    Add Facilities 
 
</button> 
 
<div class="facility-form"> 
 
    <form id="facility-form1"> 
 
     <div class="row"> 
 
      <div class="col-md-4"> 
 
       <div class="checkbox"> 
 
        <label> 
 
         <input type="checkbox" value="">Internet 
 
        </label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label> 
 
         <input type="checkbox" value="">Bar 
 
        </label> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-4"> 
 
       <div class="checkbox"> 
 
        <label> 
 
         <input type="checkbox" value="">Free Wifi 
 
        </label> 
 
       </div> 
 
       <div class="checkbox"> 
 
        <label> 
 
         <input type="checkbox" value="">Spa 
 
        </label> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </form> 
 
</div> 
 

 

Answer 1

Sie die Auswahl ist, aber Ihre Form hat eine class, kein id; siehe ***:

$(document).ready(function() { 
 
    $("#add_facility").click(function() { 
 
    $(".facility-form").toggle('slow'); // *** 
 
    }); 
 
});

.facility-form { 
 
    background-color: #e3edfa; 
 
    padding: 4px; 
 
    cursor: initial; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button class="btn" id="add_facility"> 
 
    <i class="fa fa-plus" aria-hidden="true"></i> Add Facilities 
 
</button> 
 
<div class="facility-form"> 
 
    <form id="facility-form1"> 
 
    <div class="row"> 
 
     <div class="col-md-4"> 
 
     <div class="checkbox"> 
 
      <label> 
 
      <input type="checkbox" value="">Internet 
 
      </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
      <label> 
 
      <input type="checkbox" value="">Wifi 
 
      </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
      <label> 
 
      <input type="checkbox" value="">Bar 
 
      </label> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
     <div class="checkbox"> 
 
      <label> 
 
      <input type="checkbox" value="">Free Wifi 
 
      </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
      <label> 
 
      <input type="checkbox" value="">Spa 
 
      </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
      <label> 
 
      <input type="checkbox" value="">Parking 
 
      </label> 
 
     </div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
     <div class="checkbox"> 
 
      <label> 
 
      <input type="checkbox" value="">Indoor Pool 
 
      </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
      <label> 
 
      <input type="checkbox" value="">Family Rooms 
 
      </label> 
 
     </div> 
 
     <div class="checkbox"> 
 
      <label> 
 
      <input type="checkbox" value="">Smoking Rooms 
 
      </label> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>

Answer 2

dieser Fehler

$("#facility-form").toggle('slow'); 

zu

Änderung von id

$(".facility-form").toggle('slow'); 

Answer 3

Sie müssen die Klassenauswahl keine ID-Selektor von

Ändern Sie diese Zeile verwenden,

$("#facility-form").toggle('slow'); 

Um

$(".facility-form").toggle('slow'); 

Hier ist ein Arbeits Fiddle: https://jsfiddle.net/pz6h4g7q/

hoffe, das hilft!

Answer 4

ändern diese:

$("#facility-form").toggle('slow'); 

zu

$(".facility-form").toggle('slow'); 

Anlage-Formular ist eine Klasse, nicht eine ID.