Question

“显示更少”链接不起作用，但“显示更多”是，我不知道我的jQuery代码有什么问题。有人可以帮我这个吗？

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In sunt aut deleniti nihil quidem, maxime rem numquam ea quibusdam ut commodi hic fuga dolorum. Ab reprehenderit dolorem nemo error illo. Animi magni modi laudantium nisi eum cum sit minus. Repellat, esse nobis itaque ratione officia suscipit quo, saepe ipsam ab consequatur iusto commodi, quis praesentium aut consectetur sapiente officiis nesciunt quisquam velit magnam sequi nulla optio. Rem accusamus eum nam nobis officia? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem accusamus eum nam nobis officia?<a class="toggleButton"> Show More </a>
    <p class="show-text" display="none">Animi magni modi laudantium nisi eum cum sit minus. Repellat, esse nobis itaque ratione officia suscipit quo, saepe ipsam ab consequatur iusto commodi, quis praesentium aut consectetur sapiente officiis nesciunt quisquam velit magnam sequi nulla optio. Rem accusamus eum nam nobis officia?</p>
</p>

的jQuery

$('.show-text').hide();

$('.toggleButton').click(function() {
    //on click, show introText
    $('.show-text').toggle();

    $('.show-text').show();
    $('.toggleButton').hide();
    $('.show-text').append("<a class = 'show-less'>" + " Show Less" + "</a>");

});

$('.show-less').click(function() {
    $('.show-less').toggle();
    $('show-text').hide();
});

Answer 1

您在另一个<p>内无<p>。从技术上讲，这不起作用。没有值display的属性none。相反，你可以这样做：

＆＃13;

$(function () {
  $(".toggleButton").click(function () {
    $(this).closest("p").next(".show-text").toggle();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In sunt aut deleniti nihil quidem, maxime rem numquam ea quibusdam ut commodi hic fuga dolorum. Ab reprehenderit dolorem nemo error illo. Animi magni modi laudantium nisi eum cum sit minus. Repellat, esse nobis itaque ratione officia suscipit quo, saepe ipsam ab consequatur iusto commodi, quis praesentium aut consectetur sapiente officiis nesciunt quisquam velit magnam sequi nulla optio. Rem accusamus eum nam nobis officia? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem accusamus eum nam nobis officia? <a href="#" class="toggleButton"> Show More </a></p>
<p class="show-text" style="display: none">Animi magni modi laudantium nisi eum cum sit minus. Repellat, esse nobis itaque ratione officia suscipit quo, saepe ipsam ab consequatur iusto commodi, quis praesentium aut consectetur sapiente officiis nesciunt quisquam velit magnam sequi nulla optio. Rem accusamus eum nam nobis officia?</p></p>

＆＃13;

Answer 2

你的jQuery代码没有多大意义。您可以使用一个命令toggle()来实现此目的。

$(".toggleButton").click(function() {
    $(".show-text").toggle();
});

http://jsfiddle.net/os72jsf6/

此外，您的标记不正确，您需要style="display:none"而不是display="none"

要处理函数中的文本操作，您可以根据需要执行以下操作。

$(this).text(t.text() == "Show More" ? "Show Less" : "Show More");

http://jsfiddle.net/os72jsf6/2/

“显示更少”链接不起作用？

2 个答案: