多个显示/隐藏更改文本答案

【问题标题】：Multiple Show/Hide with changing text多个显示/隐藏更改文本
【发布时间】：2016-11-11 12:53:45
【问题描述】：

我有多个显示/隐藏 div，文本从 Expand 更改为 Reduce。如果有多个下拉菜单，则文本不会更改。有我的JSFiddle，你可以测试一下，删掉一段。有什么解决方案吗？ :)

这是我的 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');        
}

});

【问题讨论】：

哪个下拉菜单？你想要额外的 div 吗？
你的 if 条件不起作用，使用 if($.trim($(this).find('.expand').text()) === 'Expand'){ $(this ).find(".expand").text('Reduce'); } else { $(this).find(".expand").text('Expand'); }

标签： javascript jquery html css events

【解决方案1】：

您必须在this 中找到类为.expand 的文本，它代表被点击的section。

使用这个：

$(".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');        
    }
});

这里是jsfiddle

【讨论】：

【解决方案2】：

你应该在this（或closest(".section")）中找到.expand：

$(".section .section-title").click(function(){
  $(this).closest(".section").find('.dropdown-content').slideToggle(100).end()
  .find('.expand').toggleClass('expanded').text(function(){
    return $(this).is('.expanded') ? 'Reduce' : 'Expand';
  });
});

$(".section .section-title").click(function(){
  $(this).closest(".section")
    .find('.dropdown-content').slideToggle(100).end()
    .find('.expand').toggleClass('expanded').text(function(){
      return $(this).is('.expanded') ? 'Reduce' : 'Expand';
    });
});

.section .section-title{
    position: relative;
    left: 0;
    right: 0;
    background: #f3f5f9;
    width: 100%;
    height: 48px;
    color: #333;
    border-bottom: 1px solid #dedede;
    cursor: pointer;
    z-index: 1;
}

.section .title{
    margin: 9px 0 0 45px;
    font-size: 22px;
}

.section .title:before{
    position: absolute;
    margin: auto;
    left: 20px;
    top: 0;
    bottom: 0;
    content: "• ";
    color: #a8a8a8;
    font-size: 32px;
    line-height: 48px;
}

.section .dropdown-content{
    display: none;
}

.section .expand{
    position: absolute;
    right: 10px;
    bottom: 3px;
    font-size: 12px;
}

.section .expanded{
    color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section personal-info">
  <div class="section-title">
    <div class="title">Personal info</div>
    <div class="expand">Expand</div>
  </div>
  <div class="dropdown-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elementum lacus vel posuere placerat. Morbi ligula turpis, accumsan vitae lectus quis, aliquet sagittis est. Ut congue neque enim, et malesuada nisi sollicitudin nec. Morbi eget mauris rutrum, vestibulum orci sit amet, sollicitudin nisi. 
  </div>
</div>

<div class="section residence-address">
  <div class="section-title">
    <div class="title">Other info</div>
    <div class="expand">Expand</div>
  </div>
  <div class="dropdown-content">
    Etiam vestibulum elementum orci sit amet auctor. Vestibulum vel nisl nec velit fermentum convallis vel ut enim. Aliquam imperdiet justo urna, ut efficitur purus ornare ut. Praesent imperdiet venenatis mauris non luctus. Nullam in arcu nec arcu auctor aliquam sit amet at nisl. Donec pharetra, leo ut imperdiet convallis, risu
  </div>
</div>

如果有多个下拉菜单，文本不会改变

这是因为 $(".expand").text() 返回所有类为 expand 的元素的文本。
在您的示例中返回："ExpandExpand"，因此不满足条件 === 'Expand'。

【讨论】：

【解决方案3】：

您正在尝试检查与.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');        
}
});

【讨论】：

【解决方案4】：

请更改此设置。

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

而不是

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

【讨论】：

【解决方案5】：

尝试关注，

 $(".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");        
 }
});

【讨论】：