使用 Toggle 时更改文本和按钮

Question

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

它应该是默认设置。

当您按下“隐藏文本”时，您切换出去并将箭头按钮更改为 upp 并显示文本，并且您将文本从“隐藏文本”更改为“显示文本”

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

https://jsfiddle.net/mxt2pthw/20/

我发现最简单的方法是包含两个图像并隐藏一个，然后在点击时切换两者

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

在您的演示中，您的计算与加载时数据的显示方式相反。 根据额外问题添加了触发点击。

$('#test ').click(function() {
    $( "#aaa" ).toggle( flip++ % 2 !== 0 ); // <-- i switched this for the example
    $(this).find('img').toggle();
}).trigger('click'); // trigger on page load

Answer 2

您可以创建一个 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>

Answer 3

你可以试试这个方法：

var flip = 0;
$('#test').click(function() {
  $( "#aaa" ).toggle('slow',function(){
      if(flip++ % 2 === 0){
            $("#arrow").attr("src","https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_down_alt1-16.png");
      }else{
            $("#arrow").attr("src","https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_up_alt1-16.png");
      }
  });   
});

Answer 4

试试这个演示：

$(function(){
  var info = [{txt:'Hide Text', src:'up', fn: 'show'}, {txt:'Show Text', src:'down', fn: 'hide'}];
  var test = $('#test'), aaa = $('#aaa'), span = test.find('span');
  var img = test.find('img'), i = 0, o;
  $('#test').on('click', function(e) {
    i = (i + 1) % info.length;
    o = info[i];
    img.prop('src',"https://cdn3.iconfinder.com/data/icons/iconic-1/32/arrow_" + o.src + "_alt1-16.png");
    aaa[o.fn]();
    span.text(o.txt);
  }).trigger('click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="aaa">
  a
  <br/>b
  <br/>c
  <br/>d
  <br/>
</div>

<div id="test">
  <span></span> 
  <img alt="Loading..." />
</div>