切換箭頭圖像切換隱藏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');