Question

我想使用真棒字体类而不是unicodes或.svg（或任何图像）来获得与我下面相同的切换效果。但是，我正在努力寻找一个示例，其中在HTML中将类用于切换。非常感谢您的帮助。

如果您觉得更简单，这里是我的CodePen： https://codepen.io/fergos2/pen/vYYgYzp

下面是相同的代码，请注意，真棒字体和jQuery是在CodePen中导入的，并且我将SCSS用作CSS预处理器。

预先感谢您的帮助！

$(document).ready(function() {
  $('.toggle').click(function() {
    $('.toggle').toggleClass('active');
    $('.toggle-content').toggleClass('active');
  });
});

.hidden {
  overflow: hidden;
}

.container {
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  background-color: #eee;
}

.wrapper {
  background-color: pink;
  position: relative;

  display: flex;
  align-items: center;
}

.toggle {
  display: block;
  width: 20px;
  height: 20px;
  float: left;
  cursor: pointer;
  color: white;
  text-align: center;
  background-color: green;
  margin: 10px;

  &:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f085"; // fas fa-cogs
  }
}

.toggle.active {
  background-color: red;

  &:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00d"; // fas fa-times
  } 
}

.toggle-content {
  display: none;
}

.toggle-content.active{
  display: block;
  background-color: white;
  border: 1px solid black;
  position: absolute;
  top: 40px;
  left: 0;
}

<div class="container">
  <div class="wrapper">
    <div class="toggle"></div>
    <div class="toggle-content">
      <p>Some content</p>
    </div>
  </div>
</div>

更新在下面用我的答案解决了。

Answer 1

$(document).ready(function() {
  $('.toggle-1').click(function() {
    if ($('.toggle-2').hasClass('active')) {
      // remove toggle-2 active classes
      $('.toggle-2').removeClass('active');
            $('.toggle-2-content').removeClass('active');
    }

    $(this).find('.toggle-icon').toggleClass('fa-plus-circle fa-times active');
    $('.toggle-1').toggleClass('active');
    $('.toggle-1-content').toggleClass('active');
  });

  $('.toggle-2').click(function() {
    if ($('.toggle-1').hasClass('active')) {
      // remove toggle-1 active classes
      $('.toggle-1').removeClass('active');
            $('.toggle-1-content').removeClass('active');
    }

    $(this).find('.toggle-icon').toggleClass('fa-heart fa-times active');
    $('.toggle-2').toggleClass('active');
    $('.toggle-2-content').toggleClass('active');
  });
});

.hidden {
  overflow: hidden;
}

.container {
  width: 100%;
  height: 1000px;
  margin: 0 auto;
  background-color: #eee;
}

.wrapper {
  background-color: pink;
  position: relative;

  display: flex;
  align-items: center;
}

.toggle-1,
.toggle-2 {
    display: block;
  width: 20px;
  height: 20px;
  float: left;
  cursor: pointer;
  color: white;
  text-align: center;
  background-color: green;
  margin: 10px;
}

.toggle-icon {
  color: white;
  font-size: 10px;
  text-align: center;
}

.toggle-1.active,
.toggle-2.active {
  background-color: red;
  content: "\f342";
}

.toggle-1-content,
.toggle-2-content {
  display: none;
}

.toggle-1-content.active,
.toggle-2-content.active {
  display: block;
  background-color: white;
  border: 1px solid black;
  position: absolute;
  top: 40px;
  left: 0;
}

<div class="container">
  <div class="wrapper">


    <div class="toggle-1"><a href="javascript:void"><i class="toggle-icon fas fa-cogs"></i></a></div>
    <div class="toggle-1-content">
      <p>Some content</p>
    </div>

        <div class="toggle-2"><a href="javascript:void"><i class="toggle-icon fas fa-heart"></i></a></div>
    <div class="toggle-2-content">
      <p>Some content</p>
    </div>


  </div>
</div>

如何使用真棒字体类来切换而不是Unicode或.svg图像

1 个答案: