Question

我没有使用＆＃34;手风琴＆＃34;对于这些可折叠元素并希望避免它，因为我认为它需要花费大量时间才能转换为它。我有两个可扩展/可折叠的元素，当我打开最底部的元素时，它与页脚重叠。我已经弄清楚如何使它成为一个粘性的页脚，所以它现在位于页面的底部，但是如果内容由于元素的扩展而增长，我似乎无法进一步推下它（如果页脚不粘，它工作正常，但然后页脚位于页面中间，这是不想要的。）

我在这里看到了一些关于手风琴重叠页脚的线索，但我从来没有看到他们中的任何一个想出了解决方案。有人有什么建议吗？

HTML

<body>
<div id="wrapper">
    <div id="content">
        <div class="comm-container library-link-container">
            <p class="text-p1"><span id="library-plus-minus">+</span><a class="link" id="library-link"> NQSP</a></p>
            <div class="expand-collapse-container text-p2" id="library-explanation">
                <p class="text-p2">stuff</p>
            </div>
        </div>
        <div class="comm-container calendar-container">
            <p class="text-p1"><span id="calendar-plus-minus">+</span><a class="link" id="calendar-link"> Calendar</a></p>
            <div class="expand-collapse-container text-p2" id="calendar-explanation">
                <p class="text-p2">stuff</p>
                <div id="mobile-calendar"></div>
                <div id="desktop-calendar"></div>
            </div>
        </div>
        <div id="push"></div>
        <div class="footer copyright-container">
            <p class="center">© <span id="copyright-year"></span> <span>NBCI</span> </p>
        </div>
    </div>
</div>

CSS

.comm-container{
    border-bottom: thick solid rgb(8,107,27);
    padding: 0 10%;
}

#desktop-calendar{
    display: block;
    padding: 1% 0 3% 0;
}

#mobile-calendar{
    display: none;
}

#wrapper{
    min-height: 100%;
    position: relative;
}

#content{
    height: 80vh;
    padding-bottom: 50px;
}

.footer, #push{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
}

的Javascript

$(document).ready(function(){
    var libraryLink = false;
    var calendarLink = false;
    var width = $(window).width();

    //First expandable-collapsible enabled here
    $("#library-link").click(function() {
        if (!libraryLink) {
            $("#library-explanation").css("max-height", "2000px");
            $("#library-plus-minus").html("-");
            libraryLink = true;
        } else {
            $("#library-explanation").css("max-height", "0");
            $("#library-plus-minus").html("+");
            libraryLink = false;
        }
    });

    //Creating calendar...
    $('#desktop-calendar').fullCalendar({
        //whole lot of code here to set up the calendar views
    });

    //second expandable-collapsible enabled here
    $("#calendar-link").click(function() {
        if (!calendarLink) {
            $("#calendar-explanation").css("max-height", "2000px");
            $("#calendar-plus-minus").html("-");
            $('#desktop-calendar').show();
            calendarLink = true;
        } else {
            $("#calendar-explanation").css("max-height", "0");
            $("#calendar-plus-minus").html("+");
            $('#desktop-calendar').hide();
            calendarLink = false;
        }
    });
});

Answer 1

问题有点老了，但我试图弄清楚这个问题，但找不到任何答案，所以这是我使用 jQuery 的方法。

$('.last-list-item').click(function() {
    $(".footer").toggleClass('mt-max');
 });

所以只是解释一下代码。我正在使用 bulma css 框架，我已经对其进行了一些自定义，因此 mt-max 类会在它适用的任何元素的顶部添加 100px 边距。但是您可以轻松地创建您自己的具有所需边距的 css 类。

在您的 CSS 文件中创建一个添加 x margin-top 的类

.add-top-margin {
  margin-top: 100px;
}

向可折叠容器添加点击事件侦听器（您可能需要为要定位的任何对象添加唯一 ID）

$('#collapsibleContainer').click(function() {
   // target footer here
});

使用toggleClass 在单击手风琴时向页脚添加和删除我们新创建的类。

$('.my-footer').toggleClass('add-top-margin');

所以最后，你应该在你的 jquery 文件中有这个

$('#collapsibleContainer').click(function() {
   $('.my-footer').toggleClass('add-top-margin');
});

您可以随心所欲地调整它，您可以选择为手风琴添加填充或任何最适合您的东西，但您明白了。

*编辑我改变了我的风格，在封装我的手风琴的部分的底部添加填充，而不是向页脚添加上边距。这是因为使用边距增加了一些空白，部分背景是蓝绿色。

可折叠的javascript元素重叠页脚（不是手风琴）

1 个答案: