Question

我有一个列表，其中包含点击链接以获取更多信息，这些信息使用锚标记向下移动页面。由于存在相当多的附加信息，我将其隐藏在可扩展/可折叠部分中。

到目前为止，我设法提出的是该部分本身的扩展崩溃。我基本上都不了解Javascript，所以我所包含的内容是我从其他网站和研究中拼凑起来的东西。

我希望“点击更多”锚标记链接在点击时自动展开该部分，但也会像现在一样折叠它。

这是我设法拉到一起的js

<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>

以下是身体的一个例子

<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>

感谢您的帮助！

Answer 1

jquery可能是你最好的路线，特别是slideToggle或show and hide功能。另外，看看jQuery ui手风琴

A jquery accordion may be your best route

Answer 2

隐藏元素：

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帮助

如何指定锚标记以扩展内容

2 个答案: