javascript - 如何使用 javascript 和 css 显示扩展文本

Question

如果我单击“更多”，我需要使我的文本展开，如果我单击另一个“更多”类，我想让它从所有其他类中撤回。所以基本上只有一个“更多”类被扩展。我还想在文本 div 打开时将文本从更多更改为更少。

这是我的 html 代码

<div class="content_horses" id="page">
    <div class="accordeon" class="een">
        <div class="sientje">
            <img class="photo" src="images/horses/siente.png" alt="sientje"></img>
            <div class="name">
                SIENTJE
            </div>
            <div class="expand">
                <div class="more">MORE</div>
            </div>
            <div class="text">
                <div class="sientje_t">

                </div>
            </div>
        </div>  
    </div>
    <div class="accordeon" class="twee">
        <div class="sientje">
            <img class="photo" src="images/horses/siente.png" alt="sientje"></img>
            <div class="name">
                SIENTJE
            </div>
            <div class="expand">
                <div class="more">MORE</div>
            </div>
            <div class="text">
                <div class="sientje_t">

                </div>
            </div>
        </div>  
    </div>  

这是我的脚本

$(document).ready(function() {
    $(".text").hide();
    $(".expand").click(function() {
        $(this).next(".text").slideToggle(500);
        $(this).text($(this).text() == 'LESS' ? 'MORE' : 'LESS').toggleClass('up');
    });
    $(".expand").click(function() {
       $(".text").slideUp(500);
        if ($(this).next(".text").is(":visible")) {
            $(this).next(".text").slideUp(500);
        } else {
            $(this).next(".text").slideToggle(500);
        }
    });
});

希望你能帮助我

Answer 1

将您的脚本更改为这样。

$(document).ready(function() {
  $(".text").hide();  
  $(".expand").click(function() {
    $(".text").slideUp(500);
    $(".expand").text('MORE');

    if ($(this).next(".text").is(":visible")) {
      $(this).next(".text").slideUp(500);
    } else {
      $(this).next(".text").slideToggle(500);
      $(this).text('LESS');
    }
  });
});

https://jsfiddle.net/drh8snj5/