打開手風琴時壓下頁腳

我有一個手風琴作爲我的導航頁，但是當打開手風琴時，它與我的頁腳重疊，我環顧四周，人們都有同樣的問題，但我無法看到得到任何解決方案與我的工作。打開手風琴時壓下頁腳

.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與我的手風琴和頁腳代碼，並希望有人能提供幫助。

來源

2015-06-23 JoshuaBrand

只需設置在合攏和展開一個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'); 
    } 
});

來源

2015-06-23 08:42:22 TheOnlyError

我需要修復此位置，以便它隨頁面一起向下滾動。代碼工作正常，謝謝！ – JoshuaBrand

沒問題，我的榮幸:) – TheOnlyError

$(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'); { 
 
     \t //Expand 
 
     \t $(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 { \t 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" > 
 
\t \t \t \t \t <ul> 
 
\t \t \t \t \t \t <li class="servicesubitem"> 
 
\t \t \t \t \t \t \t <span class="subitem">Communications 
 
\t \t \t \t \t \t \t \t <br> 
 
\t \t \t \t \t \t \t \t &amp; Airtime</span><span class="fa1 fa-phone"> </span> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <div class="servicesubli"> 
 
\t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t \t VSAT 
 
\t \t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t \t IRIDIUM 
 
\t \t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t \t GSM 
 
\t \t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t \t INMARSAT 
 
\t \t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t \t IDIRECT 
 
\t \t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <li class="servicesubitem"> 
 
\t \t \t \t \t \t \t <span class="subitem">IT &amp; 
 
\t \t \t \t \t \t \t \t <br> 
 
\t \t \t \t \t \t \t \t Networking</span><span class="fa1 fa-sitemap"> </span> 
 
\t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t <div class="servicesubli"> 
 
\t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t \t Built/Refit Consultancy 
 
\t \t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t \t Managed IT Support 
 
\t \t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t \t Networking (Wired &amp; Wireless) 
 
\t \t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t \t Backup &amp; Disaster Recovery 
 
\t \t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t \t Antivirus 
 
\t \t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </div> 
 
          </ul> 
 
         </div> 
 

 
    <div id="serviceinfo"> 
 
    
 
</div> 
 
         <div style ="clear:both;"></div> 
 
<div id = "footer"> 
 
    
 
</div>

看到的只是使你的CSS文件更改。

來源

2015-06-23 08:57:53

打開手風琴時壓下頁腳

回答

相關問題