HTML Spoiler无法正常工作（JS和CSS）

Question

现在，我遇到了一个扰流器的问题……我在网上找到了它，在我的网站上实施它看起来非常令人兴奋，但是现在我遇到了问题。 我认为JS无法正常工作，因为HTML可以运行，但是缺少扰流器的功能。

无论如何，这是代码：

的HTML

<div class="panel">
<div class="toggle">
    <div class="open">
        <img src="http://www.abload.de/img/plus6jcm3.png" alt="">
        <a href="#">Open Spoiler</a>
    </div>
    <div class="close" style="display:none;">
        <img src="http://www.abload.de/img/minuswfdlk.png" alt="">
        <a href="#">Close Spoiler</a>
    </div>

    <div class="content" style="display:none;">Spoiler content</div>
</div>

还有我遇到的问题... JS

// Expand Panel
$(".open").click(function(){
    $(".content").slideDown("fast", function() {
       $(".content").animate({"height": "+=5px", }, "fast");
       $(".content").animate({"height": "-=5px", }, "fast");
    });
    $(".open").hide();
    $(".close").show();
});


// Collapse Panel
$(".close").click(function(){
    $(".content").animate({"height": "+=10px", }, "fast");
    $(".content").slideUp("fast", function() {
       $(".content").animate({"height": "-=10px", }, "fast");
       $(".close").hide();
       $(".open").show();
    });
});

我之前曾经使用过Javascript，但这与我见过的任何东西都不一样。 我试图用许多不同的方式来表达它。.但是它没有用。 这就是我现在所拥有的，并且不起作用。

<script type="text/javascript">
    // Expand Panel
    $(".open").click(function(){
        $(".content").slideDown("fast", function() {
           $(".content").animate({"height": "+=5px", }, "fast");
           $(".content").animate({"height": "-=5px", }, "fast");
        });
        $(".open").hide();
        $(".close").show();
    });


    // Collapse Panel
    $(".close").click(function(){
        $(".content").animate({"height": "+=10px", }, "fast");
        $(".content").slideUp("fast", function() {
           $(".content").animate({"height": "-=10px", }, "fast");
           $(".close").hide();
           $(".open").show();
        });
    });
</script>
<link href="<default/spoiler.css" rel="stylesheet" title="Style" />
<div class="panel">
<div class="toggle">
    <div class="open">
        <img src="http://www.abload.de/img/plus6jcm3.png" alt="">
        <a href="#">Open Spoiler</a>
    </div>
    <div class="close" style="display:none;">
        <img src="http://www.abload.de/img/minuswfdlk.png" alt="">
        <a href="#">Close Spoiler</a>
    </div>

    <div class="content" style="display:none;">Spoiler content</div>
</div>

这是我遇到的问题还是此脚本损坏？ 我该如何解决？

谢谢！

Answer 1

为什么这么复杂;）

确保页面上有jQuery：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

将其插入到结束</body>标记之前：

<script>
$(".spoiler .toggle").click(function(){
    $(this).siblings(".content").slideToggle();
    if ($(this).text() == "+| Show") {
        $(this).text("-| Hide");
    } else {
        $(this).text("+| Show");
    }
});
</script>

然后，无论您在哪里想要扰流板：

<div class="spoiler">
    <div class="toggle">+| Show</div>
    <div class="content" style="display:none"><hr />
        CONTENT GOES HERE
    </div>
</div>

http://jsfiddle.net/kYrf9/13/