如何创建多个剧透按钮 [英] How to create multiple spoiler buttons
问题描述
在构建我的网站时，我决定添加一个show / hide（剧透）部分以节省空间。这是我的工作代码：
When building my website, I decided I wanted to add a show/hide (spoiler) section in order to conserve space. Here is my "working" code:
$(document).ready(function(){ //Waits for page load
$("a.spoilerButton, a.spoilerButtonDark").click(function () { //Attaches listeners
$($(this).attr('href')).slideToggle(1000, null); //Open/closes spoiler
});
});
CSS：
CSS:
a.spoilerButton,
a.spoilerButtonDark {
text-decoration:none;
color:white;
}
a.spoilerButton:hover,
a.spoilerButtonDark:hover {
color:grey;
cursor: pointer;
}
a.spoiler {
display:none;
}
HTML：
HTML:
<div id="spoiler1" class="spoiler">Content</div> <!--Spoiler-->
<div class="contentBoxFooter">
<a href="#spoiler1" class = "spoilerButton">Show/Hide</a> <!--Button-->
</div>
我想要的是什么：
- 支持多个按钮
- 一种将按钮链接到HTML中任何位置的相应扰流器的方法
- 不知道将按钮链接到的正确方法
- 当前方法在锚标记中使用href，它会在每次点击时移动页面滚动位置
我考虑过使用锚标记中的ID标记告诉脚本什么扰流器ID，虽然我不认为ID标签是为此。这是我应该怎么做的，或者这不是正确的方法吗？
I thought about using the ID tag in the anchor tag to tell the script what the spoiler ID was, although I don't think ID tags were intended for that. Is that how I should go about doing this, or is it not the proper way to do it?
推荐答案
我不知道是否我正确理解你的问题。
在这个页面上有四个链接打开相应的剧透标签。
这只是一个简单的例子，我希望它可以帮到你。
I dont know if i understand your question correctly.
On this page there are four links that open the respective spoiler tags.
This is just a simple example, I hope it can help you.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.spoiler {
display:none;
width:100%;
height:50px;
background-color:red;
margin-bottom:10px;
}
.contentBoxFooter{position:absolute;bottom:10px;}
</style>
</head>
<body>
<div id="a1" class="spoiler">Content</div>
<div id="a2" class="spoiler">Content</div>
<div id="a3" class="spoiler">Content</div>
<div id="a4" class="spoiler">Content</div>
<div class="contentBoxFooter">
<a href="a1" class = "spoilerButton">Show/Hide</a>
<a href="a2" class = "spoilerButton">Show/Hide</a>
<a href="a3" class = "spoilerButton">Show/Hide</a>
<a href="a4" class = "spoilerButton">Show/Hide</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".spoilerButton").click(function (e) {
e.preventDefault()
var foo=$(this).attr('href')
$('#'+foo).slideToggle(1000);
});
});
</script>
</body>
</html>
这篇关于如何创建多个剧透按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
