Question

我有一系列<div>，它们具有由系统自动生成的相同类。它们没有ID值。我正在尝试更改类的单个实例的属性。

这是HTML

<div class = 'test'>
  <ul>
     <li>something</li>
     <li>something</li>
     <li>something</li>
     <li>something</li>
  </ul>
</div>
<div class = 'test'>
  <ul>
     <li>something</li>
     <li>something</li>
  </ul>
</div>

我尝试做的是将所有<div>折叠为仅显示第一个<li>something</li>，如果您点击<div>然后展开它的全尺寸。

我遇到的问题是，<li>的数量可能因内容上传而发生变化。

我尝试获取每个div的高度，然后使用jquery将css高度设置为仅显示每个div的第一个<li>。然后在div的点击事件中扩展到它们的完整大小。

这是我的Jquery：

var height = ('.test').height());


$('.test').css('height','25');

$('.test').click(function(){
    $(this).animate('height', height);
});

我无法让函数直接处理类对象的单个实例。

fiddle

Answer 1

您可以使用not(:first-child)选择器来获取不是第一个孩子的li元素。

$('li:not(:first-child)').hide();

$('.test').click(function(){
    var $this = $(this),
        list = $this.find('li:not(:first-child)');
    $this.data('collapsed', !$this.data('collapsed'));
    $this.data('collapsed') ? list.fadeIn() : list.fadeOut();
});

<强> SEE THE WORKING DEMO.

Answer 2

你可以试试这个：

var h = $('.test').find('li:eq(0)').height();

$('.test').css({'height': h, 'overflow' : 'hidden'});

$(document).on('click', '.test', function(){ // delegate the event
    if($(this).css('overflow') === 'hidden'){
        $(this).removeAttr('style');
    }else{
        $(this).css({'height': h, 'overflow' : 'hidden'});
    }
});

你需要有一个事件委托，因为正如你提到它是系统生成的，我已委托给$(document)，但是你可以委托第一次加载页面时可用的元素，如{{1}的父代。 1}}。

Answer 3

试试这个：

$('.test').each(function() {
    $(this).find('li').hide().eq(0).show();
});
$('.test').click(function() {
    $(this).find('li').show();
});

jsFiddle

使用Jquery将函数直接定向到类的单个实例

3 个答案: