显示/隐藏功能

Question

我正在尝试使用jQuery或vanilla创建一个特性。我的特性应该能够显示/隐藏点击内容。最初的任务非常简单，我可以使用jQuery切换显示隐藏的div，但我也希望能够将FA图标和链接文本从“显示内容”切换到“隐藏内容”。

​

​

​

​

Answer 1

使用

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

添加一个作为缺省值。

切换文本可以通过不使用.toggle (使用..show/.隐藏)来处理，或者为每个文本包括一个span并切换这些文本。或者有两个按钮然后切换这些。

示例片段(需要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()而不是简单地切换来添加效果。