jquery - 打开 Accordion 时按下页脚

Question

我有一个 Accordion 作为我的导航，我已经固定在页面上但是当打开 Accordion 时它与我的页脚重叠，我环顾四周，人们遇到了同样的问题但我似乎无法得到任何解决方案与我一起工作。

.servicesub {
    width: 200px;
    margin: 20px 0px;
    padding:10px;
    position: fixed;
}
.servicesub ul {
    list-style-type: none;
    padding: 0px;
    color: #fff;
}
.servicesub li {
    font-size: 14px;
    height: 70px;
    padding: 17px 0px 10px 20px;
    margin-top: 10px;
    text-transform: uppercase;
}
.servicesub li a {
    text-decoration: none;
}
.servicesub li a:hover {
    color:#fff;
}
.servicesub li {
    background-color: #017CEB;
}
.servicesub li:hover {
    background-color: #015BAC;
}
.servicesub li.active {
    background-color: #015BAC;
}
.servicesub span:after {
    color:#fff;
    font-family: FontAwesome;
    display: inline-block;
    width: 1.2em;
    font-size: 40px;
    position: absolute;
    text-align: center;
    margin-top: -9px;
}
.subitem {
    color:#fff;
    height:58px;
    width: 215px;
    position: absolute;
    right: 10px;
    text-align: center;
}
.servicesubitem {
    cursor: pointer;
}
.servicesubli {
    cursor: pointer;
    display: none;
}
.servicesubli.default {
    display: block;
}
.servicesubli ul {
    width: 100%;
    font-size: 14px;
}
.servicesubli li {
    padding: 8px;
    margin-top: 1px;
    text-transform: uppercase;
    height: 35px;
    text-align: center;
}
.servicesubli a {
    text-decoration: none;
    color: #fff;
}

<div class="col-xs-12 col-md-3 col-lg-3 servicesub" id="servicesub">
    <ul>
        <li class="servicesubitem"> 
            <span class="subitem">
                Communications<br>
                &amp; Airtime
            </span>
            <span class="fa1 fa-phone"> </span>
        </li>
        <div class="servicesubli">
            <ul>
                <li>VSAT</li>
                <li>IRIDIUM</li>
                <li>GSM</li>
                <li>INMARSAT</li>
                <li>IDIRECT</li>
            </ul>
        </div>
        <li class="servicesubitem"> 
            <span class="subitem">
                IT &amp;<br>
                Networking
            </span>
            <span class="fa1 fa-sitemap"> </span>
        </li>
        <div class="servicesubli">
            <ul>
                <li>Built/Refit Consultancy</li>
                <li>Managed IT Support</li>
                <li>Networking (Wired &amp; Wireless)</li>
                <li>Backup &amp; Disaster Recovery</li>
                <li>Antivirus</li>
            </ul>
        </div>
    </ul>
</div>
<div id="serviceinfo"></div>
<div style="clear:both;"></div>
<div id="footer"></div>

我做了一个JSFiddle使用我的 Accordion 和页脚代码，希望有人能够提供帮助。

Answer 1

只需在折叠和展开时设置一个边距:https://jsfiddle.net/5qrkze88/3/

首先，不确定您的元素是什么，但我认为将 #footer 宽度设置为 100% 会给您带来更好的结果。

第二，不知道为什么要将position设置为fixed，设置为absolute也会提高你的结果。

$(document).ready(function ($) {
    $('.servicesub').find('.servicesubitem').click(function () {

        if ($(this).next().is(':visible')) {
            //Collapse
            $(this).next().slideToggle('fast');
            $(this).removeClass('active');

            $("#footer").animate({marginTop: "0px"}, 'fast');
        } else {
            //Expand
            $(this).next().slideToggle('fast');
            $(this).siblings().removeClass('active');
            $(this).addClass('active');

            //hide other panels
            $(".servicesubli").not($(this).next()).slideUp('fast');

            $("#footer").animate({marginTop: "260px"}, 'fast');

        }

    });
    $('.servicesub').find('.servicesubitem .active'); {
        //Expand
        $(this).addClass('active');
    }
});