打开手风琴时按下页脚

Question

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

.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，希望有人能提供帮助。

Answer 1

只需在折叠和展开时设置 margin：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');
    }
});

Answer 2

$(document).ready(function ($) {
    $('.servicesub').find('.servicesubitem').click(function () {
        
        if($(this).next().is(':visible')) {
            //Collapse
            $(this).next().slideToggle('fast');
            $(this).removeClass('active');
        } else {
            //Expand
            $(this).next().slideToggle('fast');
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
    
            //hide other panels
            $(".servicesubli").not($(this).next()).slideUp('fast');

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

.servicesub { width: 200px; margin: 20px 0px; padding:10px; float:left; }
.servicesub ul { list-style-type: none; padding: 0px; color: #fff;}
.servicesub li{ font-size: 14px; height: 70px; padding: 10px; text-align:center; 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; 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; }

#serviceinfo { width: 300px; height: 280px; border: 1px solid blue; float: right; }

#footer { width: 800px; height: 200px; background-color: black; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

只需在 css 文件中进行更改即可。

打开手风琴时按下页脚

Push down footer when opening accordion

html

css

jquery

accordion

jquery-ui-accordion