Question

所以我在隐藏菜单中制作了一个隐藏的手风琴，当使用li和.slideUp()点击父.slideDown()时，下方会出现一个子菜单。但是当子菜单向下滑动时，整个菜单会移动到包含div背景的设定高度。但是我无法将.animate()放在.slideDown() / .slideUp()部分的JQuery代码中，因为并非所有子菜单都具有相同的组合高度。

演示：http://codepen.io/PorototypeX/pen/Dvjwx

想想我也把JQuery放在这里（如果你想在这里看到其他代码也只是问我并且我会编辑它）：

    $(document).ready(function () {
        $("#topnav a").click(function () {
            var el = $(this).parent();
            if (el.hasClass('active') && $(this).next().is(':visible')) {
                var active = el.siblings('.active');
                $(this).next().slideUp();
            }
            else if (el.hasClass('active') && !$(this).next().is(':visible')) {
                var active = el.siblings('.active');
                $(this).next().slideDown();
            }
            else if (!el.hasClass('active')) {
                $(this).next().slideDown();
                var active = el.siblings('.active');
                active.children('ul:first').slideUp();
                active.removeClass('active');
                el.addClass('active');
            }
        });
    });

Answer 1

你可以使用一些CSS轻松解决这个问题。 Forked Pen

说明：从div.backing和.navbar top移除了硬编码高度，将padding添加到.backing以显示一些背景在.navbar之上和之下。现在元素的背景将随其内容一起增长/缩小。根据您的喜好设置填充值。

你可以在slideDown（）/ slideUp（）发生时拉伸背景高度

1 个答案: