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

时间:2019-11-06 18:59:42

标签: jquery wordpress woocommerce

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

我想要实现的是,当您单击“ Czytajwięcej”时,文本将替换为“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');
  });
});
});

1 个答案:

答案 0 :(得分:-1)

只需在您的Jquery中进行一些更改,而不是使用addClass / removeClass来使用toggleClass:

{{1}}