Question

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

为此，我使用以下代码：

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

Answer 2

尝试按照下一个小提琴......

$(document).ready(function() {    
  var whyContent = $('#why p').text();
  var whatContent = $('#what p').text();
  var whySub = whyContent.substring(0, 100);
  var whatSub = whatContent.substring(0, 100);

  $('#why p').text(whySub );
  $('#what p').text(whatSub );

  $('div .content a').on('click', function(e){
    var div = $(e.target).parent('div');
    if(!$(e.target).hasClass('less')){
        if(div.attr('id') == 'why'){
           $('#' + div.attr('id') + ' p').text(whyContent);
        }else{
           $('#' + div.attr('id') + ' p').text(whatContent);
        }
        $(e.target).addClass('less');
        div.animate({height:'300px'}, 400);
        $(e.target).text('less');
    }else{
        $(e.target).removeClass('less');
        if(div.attr('id') == 'why'){
          $('#' + div.attr('id') + ' p').text(whySub);
        }else{
          $('#' + div.attr('id') + ' p').text(whatSub);
        }
        div.animate({height:'300px'}, 400);
        $(e.target).text('more');
    }
  });
});

Example

我希望这个有用

如何使用jQuery使用一个链接扩展多个部分？

2 个答案: