在切换隐藏 Div jQuery 脚本时旋转箭头图像

Question

我有一个适用于滑块的脚本。但现在我需要像这样使用 HTML 旋转箭头图像：

http://jsfiddle.net/nicorellius/gsDVS/

我正在使用的图片目前是班级的背景图片，byline。

jQuery 脚本在这里：

// expanding, collapsing div script
$(document).ready(function() {
    $(".toggle-content").hide();
    $(".byline").click(function() {
        //$(this).attr("id", "down-arrow");
        var $next = $(this).next(".toggle-content");
        $(".toggle-content").not($next).slideUp();
        $next.slideToggle(500);
        //$next.attr("id", "");
    });
});

这可以将图像从左到下更改，例如，id 从空到down-arrow。但是当我单击关闭滑块时，图像保持在左侧。我对如何重新编写此脚本以更改图像感到困惑。目前的图像是分开的，一张朝左，另一张朝下。我可能应该使用单个图像精灵，但我只是想先弄清楚这一点。

我读了这篇文章，这是一个好主意，但可能对我来说太复杂了，现在无法实现：

Rotate image on toggle with jQuery

谢谢。

编辑

我应该注意，我的页面与我展示的小提琴有点不同：

<div class="byline">
    <h4 class="crp-h">Analyze</h4>
    <p class="crp-p">Things are written here</p>
</div>

<div class="toggle-content">
    <ul class="crp-list">
        <li>Statistical</li>
        <li>Robust</li>
    </ul>
</div>

感谢 One Trick Pony……除了一件事，这件事几乎可以工作。旋转仅在单击 this div 时有效。当non-this div 被点击时，另一个divs 隐藏但图像保持未旋转：

.byline{
  position:relative;     /* required */
}    


.byline:after {
    transform: rotate(-90deg);
    content: '';           /* required */
    position:absolute;     /* required */
    width: 14px;           /* required, width of your arrow */
    height: 14px;          /* required, height of your arrow */
    right: -20px;          /* required, negative width + some padding */
    top:0;                 /* required */
    background: url('your/arrow/image/here.png') no-repeat;
}

.byline.exp:after {
    transform: rotate(0deg);
}

新的 jQuery 在这里：

// expanding, collapsing div script
$(document).ready(function() {
    $(".toggle-content").hide();
    $(".byline").click(function() {
        var $next = $(this).next(".toggle-content");
        $(".toggle-content").not($next).slideUp();
        $next.slideToggle(500);
        $(this).toggleClass('exp');
    });
});

显示这个的小提琴在这里：

http://jsfiddle.net/nicorellius/7AYjj/

Answer 1

根据您在触发器链接上切换的类，将箭头图形放在 :after、and transform it 等伪元素上：

.byline:after{
    transform: rotate(-90deg);
    /* arrow as background here */
}

.byline.exp:after{
    transform: rotate(0deg);
}

在您的点击事件中添加：

$(this).toggleClass('exp');