Question

有..

我想问你？如何在jquery show hide toggle中旋转箭头图标？我在这里尝试过：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");
});

工作example。

如何在jquery show hide toggle中旋转图标箭头？

1 个答案: