如何使潛水推內容

-1

我有一個簡單的JavaScript，允許我顯示/隱藏一個div當用戶點擊一個鏈接，我的問題是，顯示的div不下推容器和內容下面將「溢出」它所在的列;所以這裏是我的頁面的例子：如何使潛水推內容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

<head id="Head1"> 
<title> 
</title> 
<link rel="stylesheet" href="/foundation/css/foundation.css" /> 
<link rel="stylesheet" href="/foundation/css/app.css" /> 
<link rel="stylesheet" href="/foundation/css/normalize.css" /> 
<link href="../App_Themes/default/Styles.css" type="text/css" rel="stylesheet" /> 
</head> 

<body style="background-color:#444649;"> 

    <div class="row" style="background-color:#D3D3D3;" data-equalizer> 

     <form method="post" action="editor.aspx" id="frmServer" data-abide=""> 
      <div class="aspNetHidden"> 
      <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNTU0MTgyNDEwZGTdVjZUY5odoklB7xnAjVCPgPQ3lOfSJRpFogEKCgduiw==" /> 
      </div> 

      <div class="aspNetHidden"> 

       <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="67C3659D" /> 
       <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAP+8UmyYUk0AeVktlUECN0Go74pC+Y21+wE01Qq7CRmM9siBWxnYUgYbB45JL+mIkohgG+sbNy0e/PhzeTe4OpBJA8LnM3mlHw6DURiC8g6xg==" /> 
      </div> 

      <!-- IMPORTANT: padding-bottom:40rem; is currently in use only to exploit the problem, however it is not supposed to be here --> 
      <div class="small-12 columns" style="padding-bottom:40rem;background-color:#ffffff;" data-equalizer-watch>     
       <a class="button tiny" href="#" onclick="Toggle('ib_intro')">INTRODUZIONE</a>&nbsp; 
       <a class="button tiny" href="#" onclick="Toggle('ib_using')">USING</a>&nbsp;&nbsp; 
       <a class="button tiny" href="#" onclick="Toggle('ib_filter')">FILTER</a>&nbsp; 
       <a class="button tiny" href="#" onclick="Toggle('ib_cycle')">CYCLE</a>&nbsp; 
       <a class="button tiny" href="#" onclick="Toggle('ib_period')">PERIOD</a>&nbsp; 
       <a class="button tiny" href="#" onclick="Toggle('ib_twin')">TWIN</a>&nbsp; 
       <a class="button tiny" href="#" onclick="Toggle('ib_output')">OUTPUT</a>&nbsp;&nbsp; 
       <a class="button tiny" href="#" onclick="Toggle('ib_esempi')">ESEMPI</a>&nbsp; 

       <div id="ib_intro" class="info_box" style="display:none;"> 
        <!-- content --> 
       </div> 

       <div id="ib_using" class="info_box" style="display:none;"> 
        <!-- content --> 
       </div> 

       <div id="ib_filter" class="info_box" style="display:none;"> 
        <!-- content --> 
       </div> 

       <div id="ib_cycle" class="info_box" style="display:none;"> 
        <!-- content --> 
       </div> 

       <div id="ib_period" class="info_box" style="display:none;"> 
        <!-- content --> 
       </div> 

       <div id="ib_twin" class="info_box" style="display:none;"> 
        <!-- content --> 
       </div> 

       <div id="ib_output" class="info_box" style="display:none;"> 
        <!-- content --> 
       </div> 

       <div id="ib_esempi" class="info_box" style="display:none;"> 
        <!-- content --> 
       </div> 

       <div> 
        <!-- content --> 
       </div> 

      </div>  

     </form> 
    </div>  

    <script type="text/javascript" src="/foundation/js/vendor/modernizr.js"></script> 
    <script type="text/javascript" src="/foundation/js/vendor/jquery.js"></script>  
    <script type="text/javascript" src="/foundation/js/foundation/foundation.js"></script> 
    <script type="text/javascript" src="/foundation/js/foundation/foundation.abide.js"></script> 
    <script type="text/javascript" src="/foundation/js/foundation/foundation.equalizer.js"></script> 
    <script type="text/javascript" src="/foundation/js/foundation/foundation.offcanvas.js"></script>  
    <script type="text/javascript" src="/foundation/js/foundation/foundation.tooltip.js"></script> 

    <script type="text/javascript"> 
     function Toggle(div_id){ 
      if (document.getElementById(div_id).style.display == "block") { 
       document.getElementById(div_id).style.display = "none"; 
      } else { 
       document.getElementById(div_id).style.display = "block"; 
      }    
     } 
    </script> 

    <script type="text/javascript"> 
     $(document).foundation(); 
    </script> 
</body> 

</html>

編輯：添加了完整的頁面代碼

來源

2015-10-13 elnath78

http://jsfiddle.net/vvx8uham/ - 一切都應該沒問題，問題在別的地方 –

你能否爲這部分頁面提供CSS？ –

@BrianRay我正在使用Foundation 5和上面的部分是一個MasterPage的內容，整個事情是在一個行元素內 – elnath78

在Toggle()功能的底部添加$(document).foundation('equalizer');導致均衡器重新計算div的高度包裝的按鈕和info_box divs。這是一個jsbin，證明了這一點。

來源

2015-10-14 16:33:24

如何使潛水推內容

回答

相關問題