javascript - 显示更多按钮

Question

我想在单击按钮时显示具有“隐藏”类的 LI。

$(".show-more a").on("click", function() {
    if(linkText === "SHOW MORE"){
        linkText = "Show less";
        $('.hidden').css('visible', 'visible');
        $('.hidden').css('display', 'block');
    } else {
        linkText = "Show more";
        $('.hidden').css('visible', 'hidden');
        $('.hidden').css('display', 'none');
    };

    $this.text(linkText);
});

.hidden {
display: none;
visibility: hidden;
}

<ul>
  <li>Lorem</li>
  <li>Lorem</li>
  <li class="hidden">Ipsum</li>
</ul>
<div class="show-more">
  <a href="#">Show more</a>
</div>

我认为我的 Javascript 完全错误，我是初学者。帮我谢谢

Answer 1

您正在执行严格比较 === 因此字母大小写很重要。

if(linkText === "显示更多"){

如何删除隐藏这些元素的类？

$(".show-more a").on("click", function() {
    if(linkText === "Show more"){
        linkText = "Show less";
        $('li.hidden').removeClass('hidden')
    } else {
        linkText = "Show more";
        $('li.hidden').addClass('hidden')
    };

    $this.text(linkText);
});

带有一些额外重构的 jsFiddle: https://jsfiddle.net/rt0cs8jh/