javascript - 如何使用 jQuery 通过一个链接展开多个部分？

Question

我对 HTML 和 jQuery 仍然非常缺乏经验，所以我提前为这个可能愚蠢的问题道歉，但我还没有在网上找到任何相关信息。 我尝试使用 HTML、CSS 和 jQuery 在单击“更多/更少”时实现可扩展部分。我有两个部分，我希望它们在单击任何更多按钮时都能展开，而与哪一侧无关(否则它会不对称地展开)。

This is what it looks before clicking on the expand button

This is what I have achieved so far, but it is wrong. When clicking on the more only one section expands.

This is what I am trying to achieve: when clicking on the more link (doesn't matter which one), both sides should expand.

为此，我使用以下代码:

<div class="expandbox-top" style="height: 280px;" id="expandables">

    <div class="col">
    <p><span class="CCspace">&nbsp;</span><h2>Why?</h2><br>
        <div class="more">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc.
        Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. 
        Nullam aliquet volutpat wisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dolor
        pede, tempus non, volutpat dignissim, cursus non, mauris. In tristique. Integer blandit, lorem eget tincidunt posuere, quam 
        wisi fermentum elit, quis aliquam ante enim at nibh. Sed faucibus sem et mi. Donec iaculis nulla nec urna. Phasellus ultricies est et urna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc.
        Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. </p>
    </div>
    </div>

<div class="col">
    <p><span class="CCpullout"><span><img src="images/understand/framework_overview.png" style="margin-top: 90px;" width=280px alt="" /></span></span> 
        <h2>What?</h2><br>
    <div class="more">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, 
        consectetuer adipiscing elit. Nam tristique arcu vitae dui. Ut tempus wisi eget urna. Nullam laoreet scelerisque 
        felis. Aliquam turpis libero, iaculis nec, porta nec, condimentum sit amet, dolor. Proin cursus orci eu purus. 
        In quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
        Phasellus accumsan, augue vitae vehicula viverra, risus velit consequat nunc, ut molestie erat risus non dui. 
        Morbi placerat leo. Maecenas iaculis elit at eros. Cras sem. Phasellus augue.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc.
        Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. </p>
  </div>
    </div>

使用以下 jQuery 代码:

$(document).ready(function() {
// Configure/customize these variables.
var showChar = 350;  // How many characters are shown by default
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";


$('.more').each(function() {
    var content = $(this).html();

    if(content.length > showChar) {

        var c = content.substr(0, showChar);
        var h = content.substr(showChar, content.length - showChar);

        var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

        $(this).html(html);
    }

});

$(".morelink").click(function(){
    if($(this).hasClass("less")) {
        $(this).removeClass("less");
        $(this).html(moretext);
        $('#expandables').animate({height:'300px'}, 400);
    } else {
        $(this).addClass("less");
        $(this).html(lesstext);
        $("less").css("display", "inline");
        $('#expandables').animate({height:'500px'}, 400);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
});

任何帮助将不胜感激!

Answer 1

试试这个。在您的 $(".morelink").click(function(){...}); 中，将所有 $(this) 更改为 $(".morelink") 相反。 $(this) 的范围适用于单击的元素，而 $(".morelink") 应选择具有相同类的所有元素。

$(".morelink").click(function(){
    if($(".morelink").hasClass("less")) {
        $(".morelink").removeClass("less");
        $(".morelink").html(moretext);
        $('#expandables').animate({height:'300px'}, 400);
    } else {
        $(".morelink").addClass("less");
        $(".morelink").html(lesstext);
        $("less").css("display", "inline");
        $('#expandables').animate({height:'500px'}, 400);
    }
    $(".morelink").parent().prev().toggle();
    $(".morelink").prev().toggle();
    return false;
});