use*_*161 0 html javascript jquery
我有一个带有按钮的HTML页面,当按下该按钮时会隐藏内容.我使用的jquery代码已捆绑到我的HTML页面中.当我按下按钮显示隐藏div中的内容时,它可以找到,但是当我再次按下按钮隐藏内容时没有任何反应.如果有人能帮助我那会很棒.另外,我如何能够定位多个按钮.我只是粘贴相同的jquery代码并将其标记为"2"然后标记为"3",以此类推？任何有效的例子都会很棒.这是我的代码:
HTML:
<head>
<script>
$(document).ready(function() {
$("#spoiler1").hide();
$("#button1").click(function() {
$("#spoiler1").show(300);
});
});
</script>
</head>
<button id="button1">Adventurer ▼</button>
<div id="spoiler1" style="display:none">
<p>1. Climb a tree<input type="checkbox" /></p>
<p>2. Roll down a really big hill<input type="checkbox" ></p>
<p>3. Camp out in the wild<input type="checkbox" ></p>
<p>4. Build a den<input type="checkbox" ></p>
<p>5. Skim a stone<input type="checkbox" ></p>
</div>
提前感谢您的任何帮助或建议.
请.toggle()改用
$(document).ready(function () {
$("#spoiler1").hide();
$("#button1").click(function () {
$("#spoiler1").toggle('slow');
});
});
更新
关于有多个按钮的想法,我已经想出了你应该尝试的方法,classes而不是IDs用于按钮并提供与你想要切换的按钮相同的ID方法divs.这可能会带来一些设计问题,但您可以进行管理,这只是向前推进的基本准则.
由于Markup对于多个div来说太长了所以我只发布了.
JQuery的
$(document).ready(function () {
$(".category").click(function () {
$(".show").hide();
var divToShow = $(this).text().split(" ")[0];
$("#" + divToShow).toggle('slow');
});
});