我有一个带有按钮的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>
提前感谢您的任何帮助或建议.
我希望在HTML页面上有一个透明的div,其中有一个图形,上面有用户指示如何使用该页面.当单击或按下页面上的任何位置时,div将隐藏/消失.
我有一些JavaScript代码,我从Stack Overflow上的另一篇文章中获取,但我似乎无法让它工作.
它链接到我的HTML页面和CSS,并且div正在出现,但单击时它不会消失.
我怎样才能做到这一点？
HTML代码如下:
<div id="overlay">
<div id="home_text">
<!-- Your image -->
</div>
</div>
CSS:
#overlay {
background: rgba(0, 0, 0, .4);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 10;
}
#home_text {
background: red;
height: 300px;
margin: 20px auto 0;
width: 300px;
}
JavaScript的:
(function () {
var overlay = ('#overlay');
overlay.on('click', function (e) {
overlay
.hide()
.off();
});
});