Question

我正在寻找一个解决方案的stackoverflow，但我没有找到它。我的问题是我在我的网站上制作了一个剧透，它滑动切换好，但我想它滑动它改变类并返回当前类。但是当我点击不同的剧透，所有的破坏者将打开并更改类时，我会制作多个具有我不想要的同类的div。

<a class="show-hide" data-divId="stats1" href="javascript:void(0)">
<div class="spoiler-kop1">
    <span class="toer-kop-text">Toernooi 1</span>
</div>
</a>
<div class="spoiler-img">
    <div class="toernooi-info">
        <table border="0">
          <tr>
            <td>Start datum:</td>
            <td>30-10-2013</td>
          </tr>
          <tr>
            <td>Eind datum: </td>
            <td>30-10-2013</td>
          </tr>
           <tr>
            <td>Eind datum: </td>
            <td>30-10-2013</td>
          </tr>
          <tr>
            <td>Teams:</td>
            <td> TCA , Curse , TSM , TGA<br/> RC , DHD , DDG , DODO </td>
          </tr>
          <tr>
            <td>Type: </td>
            <td>2 vs 2</td>
          </tr>
          <tr>
            <td>Map:</td>
            <td>Howeling Abyss</td>
          </tr>
        </table> 
    </div>
    <a class="toernooi-img" href="../classes/fancybox/images/1-big.png"><img src="../classes/fancybox/images/1-small.png" alt=""/></a>
</div>

这是Jquery

$(document).ready(function() {
    $('.show-hide').click(function() {
        $(this).next('div').slideToggle();
    });
});

Answer 1

您可以尝试这样的事情：

$(document).ready(function() {
    $('.show-hide').click(function() {
        var $this = $( this );
        $this.removeClass( 'show-hide' ).addClass( 'someNewClass' );
        $this.next( 'div' ).slideToggle( 'slow', function() {
            $this.removeClass( 'someNewClass' ).addClass( 'show-hide' );
        });
    });
});

正如您所看到的，slideToggle函数在动画完成后支持回调。

隐藏和;显示切换和类更改多个div

1 个答案: