如何在jQuery中旋轉圖標箭頭show hide切換？

Question

there ..

---

我想問你？ 如何旋轉jQuery中的箭頭圖標show hide切換？ 我在這裏嘗試過：http://jsfiddle.net/mikonimations/EzQsG/

<section id="evenmorelinks"><h1><div class="arrow before"></div><a id="show-title" onclick="false">Show More</a><div class="arrow after"></div></h1></section> 

<div id="cnt" style="display: none" class="fcolcontainer2"> 
<div class="f2segment"><h2>Example block</h2><span><a>333</a></span></div> 
<div class="f2segment"><h2>Example block</h2><span><a>333</a></span></div> 
<div class="f2segment"><h2>Example block</h2><span><a>333</a></span></div> 
<div class="f2segment"><h2>Example block</h2><span><a>333</a></span></div> 
<div class="f2segment"><h2>Example block</h2><span><a>333</a></span></div> 
<div class="f2segment"><h2>Finish block</h2><span><a>333</a></span></div> 

這個jQuery

(function ($) { 
     $(document).ready(function() { 
     $("#show-title").click(function() { 
     if ($('#cnt').is(":visible")) { 
      $(this).html($(this).html().replace(/Hide/, 'Show')); 
     } else { 
      $(this).html($(this).html().replace(/Show/, 'Hide')); 
     } 
     // Do it afterwards as the operation is async 
     $("#cnt").slideToggle("fast"); 
     }); 
    }); 

，但都沒有成功。 請幫幫我！ 謝謝..

Answer 1

有很多東西在那裏，但如果我讀你的意圖，它歸結爲添加擴展類到其中一個父元素。試試這個：

$("#show-title").click(function() { 
    $(this).parents('#evenmorelinks').toggleClass('expanded'); 
    // Do it afterwards as the operation is async 
    $("#cnt").slideToggle("fast"); 
}); 

working example。