Question

当我点击查看更多时，它正在扩展所有的div。应该怎么做才能扩展相应的div？

$(document).ready(function(){
 var rowsshown = 2;
 var rowheight = 1.2; // line height in 'em'
 var ht = (rowsshown * rowheight) - .5; // subtracting the .5 prevents the top of the next line from showing
 $('.info')
  .css({'overflow':'hidden','line-height' : rowheight + 'em','height': ht + 'em' });
});  
$('.aaa').click(function(){

        if ( $(".info").css('height') == 'auto') {
$('.info').css('height', ht + 'em');
} else {
$('.info').css('height','auto');
   $(this).hide();
}
});

Answer 1

您可以在点击事件中使用$(this).prev('div')作为选择器而不是$(".info")，它将选择使用类info的evey元素。在这个小提琴中看到：http://jsfiddle.net/Hvvw7/3/

通常我不喜欢这个解决方案，但是你的HTML有一种奇怪的结构，因为它可能是你最好的选择。

Answer 2

您需要使用$(this).prev()代替$('.info')。使用后者更改所有元素而不是相应的元素。

http://jsfiddle.net/zXffb/

Answer 3

问题在于以下几点：

$('.info').css('height', ht + 'em');

＆安培;

$('.info').css('height','auto');

您正在做的是选择所有带有.info类的DOM元素，而不仅仅是前面的那个元素。

我将在您的链接div上使用jQuery.prev()来获取前面的信息div。

Answer 4

我认为个人解决这个问题的最简单方法是将id分配给你拥有的每个.info类。然后让你的更多链接调用函数而不是只运行所有类。

<div id="element_link_1" class="info">
    bunch of long text
</div>
<div id="link_1" class="aaa"><a href="#">see more</a></div>

$('.aaa').click(function(){
    toggle($(this).attr('id'));
});

function toggle(id)
{
     if ( $("#element_" + id).css('height') == 'auto') {
        $("#element_" + id).css('height', ht + 'em');
     } else {
        $("#element_" + id).css('height','auto');
        $("#link_" + id).hide();
     }
}

Answer 5

在.click() .aaa函数中

找到prev div而不是.info

像这样......

$('.aaa').click(function(){
    var $prev = $(this).prev('div.info');
    if ( $prev.css('height') == 'auto') {
    $prev.css('height', ht + 'em');
    } else {
    $prev.css('height','auto');
       $(this).hide();
    }
    });

Answer 6

Here是一种做法...它隐藏了显示当前div的更多链接，折叠所有其他当前打开的div并带回那里显示更多链接。

一次扩展一个div

6 个答案: