jquery - 使用 Toggle 时更改文本和按钮

Question

目标:
我想隐藏字母“a b c d”，当它被隐藏时，箭头应显示为向下箭头。 https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_down_alt1-16.png .

应该是默认设置。

当您按下“隐藏文本”时，您会退出并将箭头按钮更改为向上并显示文本，还将文本从“隐藏文本”更改为“显示文本”

https://jsfiddle.net/mxt2pthw/15/

var flip = 0;
$('#test ').click(function() {
  $( "#aaa" ).toggle( flip++ % 2 === 0 );
});

<div id="aaa">
a <br/>
b <br/>
c <br/>
d <br/>   
    
 
</div>

<div id="test">
    Test <img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_up_alt1-16.png" />
</div>

Answer 1

您可以创建一个 css 类来使用 rotate 旋转图像，在 js 中使用 toggleClass :

$('#test').click(function() {
  $("#aaa").toggle();
  $(this).find("img").toggleClass("hide");
});

.hide {
  /* Firefox */
  -moz-transform: rotate(180deg);
  /* Safari and Chrome */
  -webkit-transform: rotate(180deg);
  /* Opera */
  -o-transform: rotate(180deg);
  /* IE9 */
  -ms-transform: rotate(180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="aaa">a
  <br/>b
  <br/>c
  <br/>d
  <br/>
</div>
<div id="test">Test
  <img src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_up_alt1-16.png" />
</div>