jquery切换功能不起作用

Question

我正在制作一个在按钮的帮助下切换（隐藏和显示）的表单，但它不起作用。任何人都可以检查我的代码，并告诉我为什么我的脚本不起作用。我的代码在下面

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

   

＆＃13;

＆＃13;

＆＃13;

Answer 1

您是按id选择的，但您的表单有class，而不是id;见***：

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

您需要使用类选择器而不是ID选择器

从

更改此行

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

要

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

这是一个工作小提琴：https://jsfiddle.net/pz6h4g7q/

希望这有帮助！

Answer 3

这是错误

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

更改为

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

Answer 4

改变这个：

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

到

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

facility-form是一个类，而不是ID。