多个显示/隐藏改变文本

Multiple Show/Hide with changing text

本文关键字：改变 文本 隐藏 显示      更新时间：2023-09-26

我有多个显示/隐藏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');        
}
});

您必须在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');        
    }
});

您应该在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类元素的文本。
在您的示例中返回:" expexpand "，因此条件=== 'Expand'不满足。

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

请修改一下，它会起作用的。

$(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");        
 }
});
相关文章：