javascript - HTML 剧透无法正常工作(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/