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

【问题标题】：Expand/Collapse parent elements using javascript or jquery?使用 javascript 或 jquery 展开/折叠父元素？
【发布时间】：2018-04-27 23:40:48
【问题描述】：

原谅我有限的 js 经验。我继承了一些旧的、基于框架集的软件在线文档，我需要更新到 HTML5/responsive。作者将每个“主题”输入到基于桌面的 CMS 中，然后 CMS 将每个主题“发布”到 html 页面。除了主题页面，它还发布了一个我加载并使用的 table-of-contents.htm (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 和它的父主题：

&lt;body  onload="if (isTOCLoaded()) {expand('144468');expand('145054');highlight('142049')}"&gt;

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

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

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

非常感谢任何帮助！我在这上面花了几个小时：（

【问题讨论】：

有活生生的例子吗？
给你 - 谢谢！ help.mark2741.webfactional.com/042118-1000/134150.htm
所以我们要切换左侧的菜单树？
slideToggle()?
不只是切换所有的展开/折叠——我能够弄清楚（通过简单地将“sp”类的显示设置为无）。我需要做的是：当用户单击菜单树中的链接时，页面会在右侧加载，然后整个树会折叠，除了加载的主题及其父主题（以及所有兄弟主题）。

标签： javascript jquery

【解决方案1】：

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

这是顺序。

关闭所有项目，就像没有选择任何内容一样
通过url获取选中项
检查打开项目的父母。

很多 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');
    };

【讨论】：

@user172586 能不能加个console.log看看那个地方是否正常工作
@user172586 你在哪里添加的？
@user172586 您将其添加到头部。代码在页面加载之前运行。添加.load() 监听器
@user172586 jsfiddle 是干什么用的？
对不起。我确保您提供的代码正在运行 - 它在加载 toc 后在窗口加载时运行的 init() 中。我用 console.log 验证了。我已经隔离了这个问题 - 正在发生的事情是这一行：while($(checkParent).parent().hasClass('sp')==true) 永远不会评估为真。我认为问题/困难在于 DOM 不是分层的 - 为了模拟真正的“树”，原始开发人员只需设置 margin-left 来缩进每个树节点。 @Gerardo BLANCO