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

@Inject
public CustomerService(EmailService mailService) {
    this.mailService = (DefaultEmailService) mailService;
}

$(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; }

请参阅您的css文件中的更改。

打开手风琴时按下页脚

2 个答案: