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

【问题标题】：Collapsible javascript element overlapping footer (not accordion)可折叠的 javascript 元素重叠页脚（不是手风琴）
【发布时间】：2020-12-21 16:29:03
【问题描述】：

我没有对这些可折叠元素使用“手风琴”，并希望避免使用它，因为我认为转换它需要很多时间。我有两个可展开/可折叠的元素，当我打开最底部的元素时，它与页脚重叠。我已经想出了如何使它成为一个粘性页脚，所以它现在位于页面的底部，但是如果内容由于元素的扩展而增加高度（如果页脚不粘，它工作正常，但页脚位于页面中间，这是不需要的）。

我在这里查看了一些关于手风琴重叠页脚的主题，但我从未见过他们中的任何一个提出解决方案。有人有什么建议吗？

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;
        }
    });
});

【问题讨论】：

你不能在点击时切换一个类，然后使用 CSS 完成其余的工作吗？
@Kontsnor 你能给我举个例子吗？我不精通 Javascript，你在上面看到的东西是我通过模仿文档和其他资源拼凑而成的。当元素展开时，新类必须是什么样子才能使页脚向下移动？
我的意思是 CSS 类。例如添加一个类hidden 和showing。使用 CSS ::after 选择器添加加号/减号，同时在 CSS 中添加最大高度。这样你只需要在javascript中调用toggleClass。
您能否为现场演示创建一个小提琴。尝试将您的 div 的 z-index 设置为 0..
@Kontsnor 感谢您的提示，您的建议让我朝着正确的方向前进。创建这些 CSS 类将使我的 javascript 看起来更干净，但问题不会得到解决，因为问题在于页脚如何在单击时起作用，因为我需要它在扩展元素时向下移动。通过使用toggleClass，我可以通过删除位置设置为绝对位置的“页脚”类来更改页脚在单击时的行为方式。当它不是绝对定位时，它会识别元素的扩展并按照应有的方式向下移动页面。

标签： javascript html css

【解决方案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');
});

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

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

【讨论】：