如何分配定位標記來展開內容

我有一個鏈接點擊的列表，以獲取更多信息，這些信息使用定位標記向下移動頁面。由於有相當多的附加信息，我將它隱藏在可展開/可摺疊的部分中。如何分配定位標記來展開內容

到目前爲止，我設法提出的一個問題就是該部分本身的展開式崩潰。我基本上對JavaScript沒有什麼瞭解，所以我所包含的內容是我從其他站點和研究中拼湊出來的一些內容。

我想點擊'更多'錨標記鏈接來自動展開該部分，但是也會將其與我現在所擁有的相似。

這裏是我設法扯在一起

<script type="text/javascript"> 
    function toggle_visibility(tbid,lnkid) { 
     if (document.all) { 
      document.getElementById(tbid). style.display = document.getElementById(tbid).style.display == "block" ? "none" : "block"; 
     } 
     else { 
      document.getElementById(tbid).style.display = document.getElementById(tbid).style.display == "table" ? "none" : "table"; 
     } 

     document.getElementById(lnkid).value = document.getElementById(lnkid).value == "[-] Collapse" ? "[+] Expand" : "[-] Collapse"; 
    } 
</script> 

<style type="text/css"> 
    .hangingIndent { 
     text-indent: -24px; 
     padding-left: 24px; 
    } 
    #tbl1 {display:none;} 
    #lnk1 { 
     border:none; 
     background:none; 
     width:85px; 
    } 
</style>

JS和這裏是人體的一個例子

<body style="background-color: #FFFFFF; margin: 20;"> 
    <p style="font-family: Calibri, sans-serif; font-size: 12pt; padding:0px 20px;" class="hangingIndent"> 
     <input type="checkbox"> 
      <strong>Item one</strong><br /> 
      <em>For more information about Item one <a href="#Item1">click here</a>!</em> 
    </p> 
    <br /> 

    <table width="800px" border="0" align="center" cellpadding="4" cellspacing="0"> 
     <tr height="1"> 
      <td bgcolor="#333333" colspan="3"></td> 
     </tr> 
     <tr bgcolor="#EEEEEE" height="15"> 
      <td> 
       <strong><a id="Item1">Item one</a></strong> 
      </td> 
      <td bgcolor="#EEEEEE" align="right"> 
       <input id="lnk1" type="button" value="[+] Expand" onclick="toggle_visibility('tbl1','lnk1');"> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="3"> 
       <table width="100%" border="0" cellpadding="4" cellspacing="0" id="tbl1"> 
        <tr> 
         <td colspan="3"> 
          <p style="font-family: Calibri, sans-serif; font-size: 12pt; padding:0px 20px;">Lots of extra information about Item one</p> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
    <br /> 
</body>

感謝您的幫助！

來源

2014-01-27 Sarah

看看jQuery的，很多這種東西的爲你做了。 – ElendilTheTall

jquery可能是你最好的路線，特別是slideToggle或者顯示和隱藏功能。此外，必須在jQuery UI的手風琴

A jquery accordion may be your best route

來源

2014-01-27 16:18:08 user466764

偷看隱藏要素：

document.getElementById(idOfElement).style.display="none"

告訴他們：

document.getElementById(idOfElement).style.display="block"

可以做出功能

function toggleElementDisplay(elementID){ 

    element = document.getElementById(elementID); 

    if(element.getPropertyValue("display") == "block"){ 
     element.style.display="none"; 
    } else { 
     element.style.display="block"; 
    } 

}

要使用它做這樣的

<body> 
<div id="click" onClick="toggleElementDisplay('stuff');">Toggle</div> 
<div id="stuff">Hello</div> 
<script> 
function toggleElementDisplay(elementID) { 
    var element = document.getElementById(elementID), 
     style = window.getComputedStyle(element), 
     display = style.getPropertyValue("display"); 

    if (display == "block") { 
     element.style.display = "none"; 
    } else { 
     element.style.display = "block"; 
    } 

} 
</script> 
</body>

這裏是一個demo幫助

來源

2014-01-27 16:24:39

如何分配定位標記來展開內容

回答

相關問題