用于“阅读更多”产品类别描述的Jquery函数未按预期工作

Question

这里有我的项目http://inubia-projekt.dkonto.pl/product-category/sukienki/sukienki-wieczorowe/的链接

我想要实现的是，当你点击"Czytaj więopis“时，文本会换成"Zwińopis”。我也想附加功能在第二个跨度点击("Zwińopis")，这将使文本再次简短。我是jquery和javascript的新手，所以我需要帮助。我编写的代码只用于以一种方式扩展文本。

下面是一个代码：

HTML：

<div id="read-more"><span>Czytaj więcej</span><span>Zwiń opis</span></div>

CSS：

#read-more span:last-child {
    display: none;
}

.visible {
    display: block !important;
}

.not-visible {
    display: none !important;
}

.visible-desc {
    max-height: 100% !important;
}

.term-description {
    max-height: 65px;
    overflow: hidden;
   margin-bottom: 20px
}

jQuery

jQuery(document).ready(function( $ ){
   $(function() {
  $("#read-more span:first-child").click(function() {
    $(".term-description").addClass('visible-desc');
    $("#read-more span:first-child").addClass('not-visible');
    $("#read-more span:last-child").addClass('visible');
  });
});
});

Answer 1

只需在您的Jquery中做一些更改，而不是使用addClass/removeClass，而使用toggleClass：

jQuery(document).ready(function( $ ){
   $(function() {
      $("#read-more").click(function() {
          $(".term-description").toggleClass('visible-desc');
          $("#read-more span:first-child").toggleClass('not-visible');
          $("#read-more span:last-child").toggleClass('visible');
      });
   });
});