Question

我找到了这个甜美的手风琴菜单，我想稍微修改一下。我想添加一个关闭函数，所以如果我点击活动的h2它会向上滑动并关闭。我怎样才能做到这一点？

$(function() {
    $('#accordion .content').hide();
    $('#accordion h2:first').addClass('active').next().slideDown('slow');
    $('#accordion h2').click(function() {
        if ($(this).next().is(':hidden')) {
            $('#accordion h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});

http://jsfiddle.net/tovic/CzE3q/

Answer 1

您需要检查您点击的项目是否已经有active课程。试试这个：

$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');

$('#accordion h2').click(function () {
    var openPanel = !$(this).hasClass('active')
    $('#accordion h2').removeClass('active').next().slideUp('slow');
    openPanel && $(this).toggleClass('active').next().slideDown('slow');
});

Example fiddle

Answer 2

将else块添加到click事件处理程序，如果它未被隐藏，则会关闭该窗格。

$(function() {
    $('#accordion .content').hide();
    $('#accordion h2:first').addClass('active').next().slideDown('slow');
    $('#accordion h2').click(function() {
        if($(this).next().is(':hidden')) {
            $('#accordion h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }else{
            $('#accordion h2').removeClass('active').next().slideUp('slow');
        }
    });
});

JS小提琴： http://jsfiddle.net/CzE3q/720/

关闭活动手风琴项目

2 个答案: