jquery - 如何在jquery显示隐藏切换中旋转图标箭头？

Question

那里..

---

我要问你？如何在 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

There's a lot of stuff going on in there, but if I read your intention it boils down to adding expanded class to one of the parent elements. Try this:

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

working example.