创建手风琴类型的内容

时间:2014-02-18 14:43:15

标签: jquery accordion

我正在尝试创建一个接近jquery手风琴的东西。我不确定我哪里出错了。

第一个框打开,当您点击第二个框时,第一个框关闭,第二个框打开

到目前为止,我只是设法做到了这一点 JSFIDDLE

我的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

$.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 () {
    $(this).prevAll('.description:first').animate({
        height: $dscr.data("realHeight")
    }, 600);
    $(this).html("-");

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

1 个答案:

答案 0 :(得分:0)

Le叹息。我不知道你为什么要重新发明轮子或者尝试重新设置切换“点击”方法,但是你很难过度思考。就这么简单:

jsFiddle

var initHeight = 40; // Initial height

$('.description')
.each(function(e) { $(this).data("realHeight", $(this).height()); })
.css({ height: initHeight, overflow: 'hidden' });

$('.toggle-link').on('click', function(e) {
    var $desc = $(this).prev();
    if ($desc.hasClass('open')) {
        $(this).text('+');
        $desc.removeClass('open').animate({ height: initHeight }, 600)
    }
    else {
        $(this).text('-');
        $desc.addClass('open').animate({ height: $desc.data('realHeight') }, 600)
        .siblings('.open').removeClass('open')
        .animate({ height: initHeight }, 600, function(e) { $(this).next().text('+'); });
    }
});