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/

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

1 个答案: