显示/隐藏功能

Question

我正在尝试使用jQuery或Vanilla JS创建功能。我的功能应该能够在点击时显示/隐藏内容。初始任务很容易，我可以使用jQuery切换显示隐藏的div，但我也希望能够将FA图标以及链接文本从“显示内容”切换为“隐藏内容”。

Answer 1

使用

.toggleClass(`.fa-check .fa-cross')

添加一个作为默认值。

可以通过不使用.toggle（使用.show / .hide）或通过为每个文本包括一个span并对其进行切换来处理切换文本。或者使用2个按钮并切换它们。

示例片段（需要fa图标）

$(".toggle").click(function() {
    $(this).toggleClass("collapsed expanded")
    $(this).find("i").toggleClass("fa-chevron-up fa-chevron-down")
});

.wrapper { border: 1px solid #CCC; width: 200px; }
.wrapper .details { border-top: 1px solid #CCC; }
.wrapper .toggle.collapsed > div.details { display:none; }
.wrapper .toggle.expanded > .more { display:none; }
.wrapper .toggle.collapsed > .less { display:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>
  <div class='toggle collapsed'><i class='fa fa-chevron-up'></i>
    <div class='more'>more</div><div class='less'>less</div>
    <div class='details'>details</div>
  </div>
</div>

如果需要，也可以对图标应用相同的文本逻辑（包括2 <i class='fa...），然后根据父类使用css显示/隐藏它们。

您还可以添加一些css过渡，以减少跳动，或者可以使用$(this).find(".more,.less").slideToggle()而不是仅切换即可添加效果。

Answer 2

有很多方法可以做到这一点。以下是分步教程。

如果您已经包含jQuery，这应该可以工作。

<img id="imgtog" onclick="toggle()" src="someimg1.png">
<div id="content" hidden="">content</div>

<script>
var tog = false;

function toggle()
{
   if(tog == false)
   {
      $('#content').removeAttr('hidden');
      $('#imgtog').attr('src', 'otherimage2.png');
     tog = true;
    }
    else
    {
       $('#content').attr('hidden', '');
       $('#imgtog').attr('src', 'someimg1.png');
      tog = false;
    }
}

</script>