Javascript 多次显示/隐藏更改的文本

我有一个多个显示/隐藏div，可以将文本从展开更改为减少。如果有多个下拉列表，文本不会更改。有我的，你可以测试它，删除一个部分。有什么解决办法吗？：）

这是我的JQuery

$(".section .section-title").click(function(){
  $(this).closest(".section").find('.dropdown-content').slideToggle(100);
  $(this).find('.expand').toggleClass('expanded');

  if ($.trim($(".expand").text()) === 'Expand') {
    $(".expand").text('Reduce');
} else {
    $(".expand").text('Expand');        
}

});

---

您必须在

此

中找到类为

的文本。展开

，表示单击的

部分

使用以下命令：

$(".section .section-title").click(function(){
    $(this).closest(".section").find('.dropdown-content').slideToggle(100);
    $(this).find('.expand').toggleClass('expanded');

    if ($.trim($(this).find(".expand").text()) === 'Expand') {
        $(this).find(".expand").text('Reduce');
    } else {
        $(this).find(".expand").text('Expand');        
    }
});

这里是您应该找到
。在
中展开
（或
最近的（“.section”）
）：


$（“.section.section title”）。单击（函数（）{
$（此）
.find（“.dropdown content”）.slideToggle（100）.end（）
.find（'.expand'）.toggleClass（'expanded'）.text（函数（）{
返回$（this）.is（'.expanded'）？'Reduce'：'expanded'；
});
});
.section.section标题{
位置：相对位置；
左：0；
右：0；
背景#f3f5f9；
宽度：100%；
高度：48px；
颜色：#333；
边框底部：1px实心#dedede；
光标：指针；
z指数：1；
}
.章节.标题{
利润率：9px045px；
字体大小：22px；
}
.章节.标题：之前{
位置：绝对位置；
保证金：自动；
左：20px；
排名：0；
底部：0；
内容：“•”；
颜色：#a8a8a8；
字体大小：32px；
线高：48px；
}
.section.下拉列表内容{
显示：无；
}
.部分。展开{
位置：绝对位置；
右：10px；
底部：3px；
字体大小：12px；
}
.第节.扩大{
颜色：红色；
}

个人信息
扩大
Lorem ipsum dolor sit amet，是一位杰出的献身者。placerat公司的lacus vel posuere lacus ELEMENT公司。山羊舌苔，伏隔肌，矢状肌。但是，这是一个非常好的例子。Morbi eget mauris rutrum，前庭orci sit amet，sollicitudin nisi。
其他信息
扩大
前庭或前庭元素位于左侧。前庭水平为nisl nec velit convallis vel ut enim。这是一个不公平的事实，但它的效率是不公平的。非卢克图斯威尼斯人。在nisl的阿库nec阿库拍卖人阿利奎姆坐在阿米特。Donec pharetra，leo ut imperdiet convallis，risu
您正在尝试检查匹配的所有元素的文本。
展开。所以，如果你有多个下拉列表，这就不起作用了

试试这个：

$(".section .section-title").click(function(){
$(this).closest(".section").find('.dropdown-content').slideToggle(100);
$(this).find('.expand').toggleClass('expanded');

if ($.trim($(this).find('.expand').text()) === 'Expand') {
  $(this).find('.expand').text('Reduce');
} else {
  $(this).find('.expand').text('Expand');        
}
});

请把这个换一下，它会工作的

$(this).find($(".expand")).text()

而不是

$.trim($(".expand").text())

试试下面的

 $(".section .section-title").click(function(){
 $(this).closest(".section").find('.dropdown-content').slideToggle(100);
 $(this).find('.expand').toggleClass('expanded');

 if ($.trim($(this).find(".expand").text()) === 'Expand') {
   $(this).find(".expand").text("Reduce");
 } else {
    $(this).find(".expand").text("Expand");        
 }
});

哪个下拉菜单？您是否需要一个额外的div？如果条件不起作用，请使用if（$.trim（$（this）.find（'.expand'）.text（））==='expand'）{$（this）.find（.expand”）.text（'Reduce'）；}否则{$（this）.find（.expand”）.text（'expand'）；}
 $(".section .section-title").click(function(){
 $(this).closest(".section").find('.dropdown-content').slideToggle(100);
 $(this).find('.expand').toggleClass('expanded');

 if ($.trim($(this).find(".expand").text()) === 'Expand') {
   $(this).find(".expand").text("Reduce");
 } else {
    $(this).find(".expand").text("Expand");        
 }
});