jquery切换功能不起作用
问题描述:
我正在制作一个窗体,它在按钮的帮助下切换(隐藏并显示),但它不起作用。任何人都可以请检查我的代码,并告诉我为什么我的脚本不工作。我的代码如下jquery切换功能不起作用
$(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>
答
你被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>
答
您需要使用类选择不是一个ID选择
改变这一行的,
$("#facility-form").toggle('slow');
要
$(".facility-form").toggle('slow');
这里是一个工作小提琴:https://jsfiddle.net/pz6h4g7q/
希望这有助于!
答
更改此:
$("#facility-form").toggle('slow');
到
$(".facility-form").toggle('slow');
设施形式是一类,而不是一个ID。
请阅读[如何格式化我的代码块?](http://meta.*.com/questions/251361/how-do-i-format-my-code-blocks) – Liam
请注意format你的问题正确。这几乎是不可读的 –
*不工作*如何? – Liam