Question

我已使用以下代码在WP博客文章中制作了目录。

将此 CSS代码添加到自定义CSS文件中：

 #toc_container {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 1px solid #aaa;
    display: table;
    font-size: 95%;
    margin-bottom: 1em;
    padding: 20px;
    width: auto;}

.toc_title {
    font-weight: 700;
    text-align: center;}

#toc_container li, #toc_container ul, #toc_container ul li{
    list-style: outside none none !important;}

和我使用的 HTML代码是：

<div id="toc_container">
<p class="toc_title">Contents</p>
<ul class="toc_list">
  <li><a href="#First_Point_Header">1 First Point Header</a>
  <ul>
    <li><a href="#First_Sub_Point_1">1.1 First Sub Point 1</a></li>
    <li><a href="#First_Sub_Point_2">1.2 First Sub Point 2</a></li>
  </ul>
</li>
<li><a href="#Second_Point_Header">2 Second Point Header</a></li>
<li><a href="#Third_Point_Header">3 Third Point Header</a></li>
</ul>
</div>

现在，如何像在Wikipedia目录中一样在目录（标题）旁边添加[隐藏]和[显示]选项？答复表示赞赏。

Answer 1

不太棘手：）

尝试一下：

<html>
<head>
    ...HEAD Stuff...
    <script>
    var hideTOC = function(){
        var hideThese = document.getElementsByClassName("toc_list");
        for (var i = 0; i < hideThese.length; i++){
            hideThese[i].style.display = "none";
        }
        document.getElementById("showTOC").style.display = "";
    }
    var showTOC = function(){
        var showThese = document.getElementsByClassName("toc_list");
        for (var i = 0; i < showThese.length; i++){
            showThese[i].style.display = "";
        }
        document.getElementById("showTOC").style.display = "none";
    }
    </script>
</head>
<body>
    ...BODY Stuff...
    <div id="toc_container">
        <p class="toc_title">Contents [<a href='javascript:void(null)' class='toc_list' onclick='hideTOC()'>hide</a><a href='javascript:void(null)' id='showTOC' style="display:none;" onclick='showTOC()'>show</a>]</p>
        <ul class="toc_list">
            <li><a href="#First_Point_Header">1 First Point Header</a>
                <ul>
                    <li><a href="#First_Sub_Point_1">1.1 First Sub Point 1</a></li>
                    <li><a href="#First_Sub_Point_2">1.2 First Sub Point 2</a></li>
                </ul>
            </li>
            <li><a href="#Second_Point_Header">2 Second Point Header</a></li>
            <li><a href="#Third_Point_Header">3 Third Point Header</a></li>
        </ul>
    </div>
    ...BODY Stuff...
</body>
</html>

如何在目录标题旁边添加[隐藏]和[显示]选项？

1 个答案: