Question

我希望有人可以提供帮助。在html代码中包含3个带有employee-block类的div。我想添加javascript / jquery代码来扩展/折叠第二个div（或employee-block div）之后的任何内容。这是我的HTML：

<div class="employee-block">
    <img alt="test" title="test" src="/images/42.png" /><div class="employee-details"><span class="red strong">TEST</span><br /><p>test description</p></div>                    
</div>               
<div class="bottom"></div>            
<div class="employee-block">
    <div class="employee-details"><span class="red strong">support@.net</span><br /><p>testing description</p></div>                    
</div>               
<div class="bottom"></div>            
<div class="employee-block">
    <img alt="test" title="test" src="/images/42.png" /><div class="employee-details"><span class="red strong">TEST</span><br /><p>test description</p></div>
</div>               
<div class="bottom"></div>

我有这个jquery代码，但不知道如何插入它。在我的示例html代码中我只想隐藏/显示第3个employee-block div，所以真的超过2，因为可能有2个以上：

<script type="text/javascript">
$(document).ready(function () {        
    $('div.view').hide();         
    $('div.slide').click(function () {            
        $('div.view').slideToggle(400);
        return false;
    });
});

Answer 1

你的问题对我来说不是很清楚，但看看这段代码：

$('a.createSomeButton').click( function() {
  if ( ! $('#IwillCollapse').length ) {
    $('.employee-block:gt(1)').wrap('<div id="IwillCollapse" />');
  }
  $('#IwillCollapse').slideToggle();
  return false;
});

Answer 2

这可以帮助您顺利前进。有许多不同的方法可以达到你想要的效果，但这可能是最容易掌握的。 http://jsfiddle.net/jSZxp/1/

var employeeBlocks = $('.employee-block').slice(2); //returns all after the first 2

employeeBlocks.addClass('hidden'); //attach the hidden class

$('button').on('click', function(){
    employeeBlocks.toggle('hidden'); //toggles the hidden class
});

计算div并添加jquery以展开和折叠Text

2 个答案: