jQuery切换所有内容 [英] jquery toggling all the content

问题描述

我正在尝试分别切换内容.

Hi I'm trying to toggle content sepratly.

例如:如果我单击第一个内容，则其余部分保持关闭；如果我单击第二个内容，则第一个内容将关闭，第二个内容将打开，直到我没有为止任何更多内容.

For example: if I click on the first content it opens up and the rest stays closed and if I click on the second content the first content closes and the second one opens and it goes on like that until I don't have any more content.

我的问题是，当我单击"+"时，它会打开所有内容.

My problem is that when I click on the "+" it opens all the content.

这是我的html

<div class="description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut diam lacus, auctor vitae urna eget, sollicitudin ullamcorper eros. Ut mattis dignissim tellus, ac scelerisque turpis fermentum vel. Etiam faucibus eros adipiscing turpis commodo, quis pulvinar ligula ultrices. Suspendisse non felis in nisl mollis tristique vitae vitae turpis. Nunc eleifend fringilla lectus ut dapibus. Aenean et dui sed libero gravida vulputate. Proin eu metus sollicitudin, laoreet mi in, cursus metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed euismod lacus in metus porta, vitae laoreet justo eleifend. Curabitur urna tortor, egestas in dictum vel, dapibus vel orci. In sed ultricies arcu. Vivamus semper eu quam ut faucibus. </p>
</div>
<a href="#" class="toggle-link">+</a>

<div class="description">
<p>Duis bibendum diam ut imperdiet pharetra. In hac habitasse platea dictumst. Aenean hendrerit metus et imperdiet consequat. Suspendisse sit amet turpis pellentesque, rutrum tellus vitae, pretium risus. Nunc at mauris nec sem vestibulum dapibus ac eget elit. Cras luctus felis in nibh elementum, ut hendrerit est sagittis. Phasellus quis dolor malesuada, feugiat erat ac, consectetur nisl. Sed auctor dapibus augue, in sagittis ligula congue sed. Curabitur sollicitudin, tortor in scelerisque hendrerit, sem nunc aliquet mi, et accumsan felis dui sit amet erat. Sed fermentum tempus est sit amet malesuada. Donec posuere dui nibh, a ullamcorper nibh interdum sit amet. Maecenas hendrerit in arcu at consequat. Integer tempus dolor at ante ullamcorper sodales. Praesent ultricies turpis id arcu pulvinar, id fringilla metus imperdiet. Etiam felis justo, ultrices a rutrum a, bibendum at dolor. Nam felis nisi, tincidunt fermentum ornare ut, euismod sed felis. </p>
</div>
<a href="#" class="toggle-link">+</a>

这是我的Jquery

Here is my Jquery

$.fn.toggleClick=function(){
    var functions=arguments;
    return this.click(function(){
        var iteration=$(this).data('iteration')||0;
        functions[iteration].apply(this,arguments);
        iteration= (iteration+1) %functions.length;
        $(this).data('iteration',iteration);
    });
};


var $dscr = $('.description'),
    $switch = $('.toggle-link'),
    initHeight = 40; // Initial height

$dscr.each(function () {
    $(this).data("realHeight", $(this).height()); // Create new property realHeight
}).css({
    overflow: "hidden",
    height: initHeight  
});

$switch.toggleClick(function () {
    $dscr.animate({
        height: $dscr.data("realHeight")
    }, 600);
    $switch.html("-");

}, function () {
    $dscr.animate({
        height: initHeight
    }, 600);
    $switch.html("+");
});

这是jsfiddle的链接 jsfiddle

Here is the link to the jsfiddle jsfiddle

推荐答案

更改代码的这一部分:

$switch.toggleClick(function () {
    $('.description').animate({
        height: 40
    });
    $(this).prevAll('.description:first').animate({
        height: $dscr.data("realHeight")
    }, 600);
    $(this).html("-");

}, function () {
    $dscr.animate({
        height: initHeight
    }, 600);
    $switch.html("+");
});

FIDDLE

您要使用$(this)选择当前单击的元素.

You want to use $(this) to select the currently clicked element.

这篇关于jQuery切换所有内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！