Question

请原谅我有限的经历。我继承了一些旧的，基于框架集的软件在线文档，我需要更新为HTML5 /响应。作者将每个“主题”输入到基于桌面的CMS中，然后CMS将每个主题“发布”到html页面。它与主题页面一起发布了一个我加载的table-of-contents.htm（TOC），用于使用户能够选择并加载所需的主题。

主题按“书籍”或父主题分组，从而产生树状TOC。默认情况下，所有“书籍”都已折叠。我需要能够扩展/折叠TOC条目，以便在用户选择主题时，该主题及其直接父主题被扩展。这是系统为我生成的toc.htm的子集。我无法控制这个生成的文件：

<!-- excerpt from generated Table Of Contents -->

<h1 class="heading1">Contents</h1>
<table class="tabledhtmltoc" cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td align="left" valign="top" nowrap="nowrap"><span class="toc">&nbsp;<br>
			<img id="p145054" src="plus.gif" onclick="exp('145054')" alt=""><img id="b145054" src="cbook.gif" alt=""><a id="a145054" href="145054.htm">Data Optimization Online Help</a><br>
			<span id="s145054" class="sp"><img style="margin-left:16px" id="p90584" src="plus.gif" onclick="exp('90584')" alt=""><img id="b90584" src="cbook.gif" alt=""><a id="a90584" href="xxoxxrview.htm">Corporate Enterprise oxxrview</a><br>
			<span id="s90584" class="sp"><img style="margin-left:32px" src="space.gif" alt=""><img src="topic.gif" alt=""><a id="a98605" href="98605.htm">The Home page - Corporate Enterprise</a><br>
				<img style="margin-left:32px" src="space.gif" alt=""><img src="topic.gif" alt=""><a id="a84599" href="logging_on_xx.htm">Logging on to the Corporate Enterprise Home page</a><br>
				<img style="margin-left:32px" src="space.gif" alt=""><img src="topic.gif" alt=""><a id="a134150" href="134150.htm">Logging off of Corporate Enterprise</a><br>
				<img style="margin-left:32px" src="space.gif" alt=""><img src="topic.gif" alt=""><a id="a100102" href="accessing_xx_solutions.htm">Accessing a Corporate Enterprise application</a><br>
			</span>
      <img style="margin-left:16px" id="p144468" src="plus.gif" onclick="exp('144468')" alt=""><img id="b144468" src="cbook.gif" alt=""><a id="a144468" href="144468.htm">About the System user interface</a>
      <br>
      <span id="s144468" class="sp"><img style="margin-left:32px" src="space.gif" alt=""><img src="topic.gif" alt=""><a id="a142049" href="142049.htm">Drawers</a><br>
				<img style="margin-left:32px" src="space.gif" alt=""><img src="topic.gif" alt=""><a id="a142437" href="142437.htm">View columns</a><br>
				<img style="margin-left:32px" src="space.gif" alt=""><img src="topic.gif" alt=""><a id="a143110" href="143110.htm">Filter values in columns</a><br>
				<img style="margin-left:32px" id="p143373" src="plus.gif" onclick="exp('143373')" alt=""><img id="b143373" src="cbook.gif" alt=""><a id="a143373" href="usinghelp_xx.htm">Using the online help</a><br>
			<span id="s143373" class="sp"><img style="margin-left:48px" src="space.gif" alt=""><img src="topic.gif" alt=""><a id="a143352" href="accessing_help_xx.htm">Accessing help</a><br>
				<img style="margin-left:48px" src="space.gif" alt=""><img src="topic.gif" alt=""><a id="a143353" href="finding_topics_with_contents.htm">Finding topics with Contents</a><br>
				<img style="margin-left:48px" src="space.gif" alt=""><img src="topic.gif" alt=""><a id="a143354" href="finding_topics_with_search.htm">Finding topics with Search</a><br>
				</span></span>

      <!-- entries continue on for depending on how many topics/nodes there are in total -->

    </td>
  </tr>
</table>

在每个单独的主题页面中都有一个onload，它引用主题的id和它的父级：

<body  onload="if (isTOCLoaded()) {expand('144468');expand('145054');highlight('142049')}">

我有jquery并且更喜欢使用它，因为我正在将它用于此项目中的许多其他功能，但如果它更有意义，可以使用vanilla javascript。

我将如何编写这样的函数：

function expand(id) { // this is called for each id via the body onload
    // expand the id (topic) in the toc...
}

非常感谢任何帮助！我花了好几个小时：（

Answer 1

下一个代码将解决您正在寻找的问题。想法是在页面加载时运行

这是序列。

关闭所有项目，就像没有选择任何内容一样
通过网址
通过父母打开物品。

很多jquery和目标要做到这一点。它可能有它可以工作的情况，但我没有遇到任何。

希望这会有所帮助：）

  //Reset tree to all close
    $('.sp').css('display','none');
    $('img[src="obook.gif"]').attr('src','cbook.gif');
    $('img[src="minus.gif"]').attr('src','plus.gif');

    //Get selected via url
    var selectedUrl = window.location.pathname.split('.')[0].split('/')[2];
    var selectedItem = $('a[href="'+selectedUrl+'.htm"]');

    var checkParent = selectedItem;
    //Iterate on parents an open all elements
    while($(checkParent).parent().hasClass('sp')==true){
        checkParent = $(checkParent).parent();
        $(checkParent).css('display','block');
        var newId = $(checkParent).attr('id').substr(1);
        $('#b'+newId).attr('src','obook.gif');
        $('#p'+newId).attr('src','minus.gif');
    };

使用javascript或jquery展开/折叠父元素？

1 个答案: