应用错误收集

如何创建多个剧透按钮

时间：2014-03-25 03:14:44

标签： javascript jquery html css

在构建我的网站时，我决定添加一个show / hide（剧透）部分以节省空间。这是我的工作＆＃34;代码：

JQuery的：

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

a.spoilerButton,
a.spoilerButtonDark {
    text-decoration:none;
    color:white;
}
a.spoilerButton:hover,
a.spoilerButtonDark:hover {
    color:grey;
    cursor: pointer;
}
a.spoiler {
    display:none;
}

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标签是为此而设的。这是我应该怎么做的，或者这不是正确的方法吗？

1 个答案:

答案 0 :(得分：1)

我不知道我是否理解你的问题在此页面上有四个链接打开相应的扰流标签这只是一个简单的例子，我希望它可以帮到你。

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