Javascript 显示更多按钮

当我点击按钮时，我想显示有“隐藏”类的LIs

$（“.show more a”）。在（“单击”，函数（）{
如果（linkText==“显示更多”）{
linkText=“显示较少”；
$（'.hidden'）.css（'visible'，'visible'）；
$（'.hidden'）.css（'display'，'block'）；
}否则{
linkText=“显示更多”；
$（'.hidden'）.css（'visible'，'hidden'）；
$（'.hidden'）.css（'display'，'none'）；
};
$this.text（linkText）；
});
。隐藏{
显示：无；
可见性：隐藏；
}

洛勒姆
洛勒姆
同侧

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

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);
});

带有一些额外重构的JSFIDLE：
您可以为默认情况下要隐藏的每个元素指定一个
隐藏的
类。然后删除该类或只需单击按钮将其滑动即可


var-active=false；
$（“.show more a”）。在（“单击”，函数（）{
$（'li.hidden'）.slideToggle（）；
$（此）.text（活动？'Show more'：'Show less'）
活动=！活动；
})；
。隐藏{
显示：无；
}


洛勒姆
洛勒姆
洛伦
洛伦
洛伦
同侧

以下是我将如何编写它

$(".show-more a").on("click", function() {
    var currentText = $(this).text();
    if(currentText === "Show More"){
        $('.hidden').show();
        $(this).text("Show Less");
    } else {
        $('.hidden').hide();
        $(this).text("Show More");
    };
});

您只需单击处理程序，查找所有具有隐藏类的ulli元素，然后将其删除

$('.show-more a').on('click', function(){
  $('ul li.hidden').removeClass('hidden');
});

使用诸如
：gt（2）
之类的选择器将使您的代码更具可扩展性。此选择器将选择除第一个
2
之外的所有项目。此外，检查
.is（“：visible”）
是查看文本设置内容的稍微安全的方法

此外，如果要使用
.slideUp（）
和
.slideDown（）
，则使用
.toggle（）
可能会有点突然，您可以将代码更改为
.slideToggle（）


$（“li:gt（2）”）.hide（）；
$（“.show more a”）。在（“单击”，函数（）{
$（“li:gt（2）”）.toggle（）；
如果（$（（“li:gt（2）”是（“：可见”））{
$（this.html（“显示较少”）；
}否则{
$（this.html（“显示更多”）；
}
})；


洛勒姆
洛勒姆
Ipsum
Ipsum
Ipsum
Ipsum
Ipsum
Ipsum

我将对其进行重构以添加父元素，然后通过父类切换此内容的状态，并更改CSS中的所有显示级别内容


var$parent=$（'.parent'），
$links=$（'.show more a'）；
$links.on（“单击”，函数（）{
$parent.toggleClass（'more'）；
})；
.parent.hidden、.more li{
显示：无；
}
.更多.隐藏{
显示：列表项；
}
a:以后{
内容:"少";；
}
a:以后{
内容：“更多”；
}


洛勒姆
洛勒姆
同侧

您的第一个也是最大的问题是，您的函数基于不存在的数据，因此无法执行（您的函数不知道什么是linkText或什么是linkText值）

其次，您不必更改“hidden”类的css属性，您只需从元素中切换该类即可

这将实现以下目的：

$(".show-more a").on("click", function() {
    $("ul li").toggleClass("hidden");
    if ($(this).text() == "Show more") {
        $(this).text("Show less");
    } else {
        $(this).text("Show more");
    }
});

linkText