切换箭头图像切换隐藏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> 

感谢一招的小马......这件事几乎是除了工作一件事。只有当点击thisdiv时，旋转才起作用。当non-thisdiv点击其他div小号躲，但图像保持不旋转：

.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');