Question

我有一个多个显示/隐藏div，其中包含从展开到缩小的文本。如果有多个下拉列表，则文本不会更改。有我的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'); } });

Answer 1

您必须在.expand中找到包含课程this的文字，该文字代表所点击的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

Answer 2

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

$(".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'不符合。

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

Answer 4

请更改此功能。

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

而不是

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

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

多个显示/隐藏更改文本

5 个答案: