问题标签 [jquery-tocify-js]

我正在使用Tocify为我网站上的某些内容制作目录。假设我的站点被调用www.example.com并且我单击了我的目录中的一个元素。Tocify 的默认选项是将我的网址更改为www.example.com?elementclicked

但我的网站是www.mysite.com/index.php?page=folder/test/ShowSite&tabid=1&site_id=87. 如果我单击一个元素，它会将 url 更改为www.mysite.com?elementClicked. 我怎样才能让它改变链接www.mysite.com/index.php?page=folder/test/ShowSite&tabid=1&site_id=87?elementClicked？

我正在使用 Tocify https://github.com/gfranko/jquery.tocify.js在站点的某些内容上制作 TOC。它工作得很好，但是我遇到了 Tocify 订购我的内容的方式的问题。我认为展示它的最佳方式是使用这张图片：

在我的查询中，Testeoverskrift 5 位于 Testeoverskrift 6 之前（应该是这样），但 Tocify 将 Testeoverskrift 置于 Testeoverskrift 6 之后。预期结果是 Tocify 会将 Testeoverskrift 5 置于与 Testeoverskrift 9 相同的级别，但低于 Testeoverskrift 10 .

对我做错了什么有什么建议吗？

我正在使用 Tocify 制作 TOC，但遇到了一些麻烦。在这个目录中，我有：“第 1 章”、“第 2 章”......

当我说“见第 1 章”时，在我的网站上有些地方。我必须在我的“参见第 1 章”html 文本中包含“a href”到“第 1 章”。但我不知道我必须在“a href=#....”中写什么。

我怎样才能做到这一点？

我正在使用 jQuery.tocify.js javascript 插件以编程方式生成目录。不过，我有一点问题。插件的操作方式，它会拉取每个h1, h2,h3等标签并制作一个嵌套列表，同时尊重深度。

我遇到的问题是，如果我有h2一个长字符串，则目录中的格式会出现“错误”。特别是，列表项的第一行是嵌套的，但内容像段落一样流动：

顶级标题

次要标题

长标题

另一个二级标题

抱歉，近似值不好，但我希望它能得到我所看到的。

有没有办法将列表项设置为将整个二级标题缩进相同的深度，以便它（大约）显示为：

顶级标题

次要标题

长标题

这是生成的目录的示例（名称很长）：

它看起来应该来自 Bootstrap nav，nav-list但我不确定 Bootstrap3 是否还有一个nav-list类。

编辑：是的，看起来该插件与 Bootstrap 3 不兼容。我想我会到处寻找不同的插件。

我想使用tocify jquery script。在这个简单的页面中，它在 Firefox 38.0.1 中无法正常工作。

它应该在#toc div 中显示一个小目录。从正文中的扫描标签生成。但是如果我在 Firefox 中渲染这个页面，什么都不会发生。它只显示 'hello' 和 'hello2' 而没有 tocify 应该生成的目录。

我在这个 html 代码中做错了吗？

默认情况下，asciidoctor创建一个静态目录。这非常酷，但是对于长文档，如果目录可以更紧凑并突出显示阅读器当前在文档中的位置，那就太好了。

此时，tocify出现了。Tocify 是一个很好的 Javascript 解决方案，正好涵盖了这一点。

现在的问题是：如何将 tocify 与 asciidoctor 一起使用？

Asciidoctor问题 699与此相关。

插件动画完成后如何执行功能？

我正在使用Tocify插件并为我正在处理的项目自定义其功能。

在我单击自动生成的目录中的一个条目后，它会使用 滚动到该条目$('html, body').animate({'scrollTop', ... 。完成后我需要做点什么。

现在，我的解决方法是将处理程序附加到clickToC 项上的事件，以在全局变量中设置一个标识目标的变量，然后将另一个处理程序附加到scroll检查变量值的窗口上的事件，采取适当的操作，然后将变量设置为未定义。

这是我的解决方法的代码：

这看起来很草率。有一个更好的方法吗？

我尝试$('html,body').promise().done()在处理程序中click.tocify使用 Tocify 使用的事件，但它会立即触发，所以我猜它发生在动画开始之前。

我在 CodePen 有一个页面，其中包含所有代码，包括我的解决方法：http ://codepen.io/Ghodmode/pen/dGdWqV

更新：

以下似乎是一个更好的解决方法。它不需要那个额外的变量，也不会在每次用户滚动时触发。

它适用于我的测试环境，但 100 毫秒是完全任意的。click.tocify我不知道从事件最初触发到动画开始之间经过了多少时间。我担心它可能不适用于某些浏览器。

当这些 URL 是跳转目标时，这个问题是关于让散列 URL（如mydomain.com/somepage#SomeAnchor）从固定页面标题下滚动出来。这是这个已回答问题的一个分支——但我想知道是否有人得到了完全在 Tripit Slate 文档发布框架上工作的答案？

这个基于 Slate 的网站不是我们的，但它显示了我们的困境：

• 如果您单击左侧导航中的链接，则中心文本列将滚动到您选择的标题。一切都很好。

• 但请尝试单击正文中的链接。例如，从 http://buddycloud.com/api#accounts点击push notification 链接。您滚动到一个完全不同的子标题。您请求的目标实际上具有焦点，但它隐藏在顶部导航栏下方。（向上滚动，你会看到它。）

我们的左导航链接工作干净，就像 buddycloud 网站的一样。感谢Sidnious 的 4086107 回答，我们在所有标题上方放置了一个不可见的伪元素，正如 Nicolas Gallagher 设计的那样。这是 CSS 类：

以下是我们如何将其应用于标题：

这对左侧导航很有效。从 css-tricks 中，我们了解了为什么“页内”散列链接仍然失败：

当链接包含哈希时，如下所示：<a href="#section-two">Section Two</a> ...浏览器窗口将滚动...到最小可能位置以使该元素完全可见。...与浏览器窗口的上边缘齐平。这可能是……在固定位置、保持在顶部的标头的情况下，问题很大。

事实上，我们的固定顶部导航看起来很像 buddycloud 的（我们的是 82 像素高）。我们的页内哈希链接隐藏在它下面，就像他们的一样。

除了两个重要的例外：首先，如果目标“散列” URL 与出站链接位于同一个降价文件中，则目标从固定标题下干净地窥视，就像左导航链接一样。（在源端，Slate 将所有内容存储为.md文件。）这将问题本地化：链接目标仅隐藏在 Slate 必须遍历到单独的目标.md文件，然后连接#<SomeAnchorName>以完成 URL 的位置。

其次，我们发现了一个 hack，它可以获取所有“页内”散列链接以清除我们的顶部标题。这涉及使用两个跨度在 HTML 中对我们的标题进行双重标记。第一个是一个空的虚拟跨度，它位于实际标题文本上方以欺骗滚动行为。（它用我们上面的jumptarget类进行了标记。）在标题本身上，我们应用了一个带有类的单独跨度，它纠正了第一次 hack 中的左缩进。双重标记如下所示：

但是，尽管这揭示了我们的“页内”散列链接，但它完全破坏了我们的左侧导航。由于与 Slate 的tocify左导航生成器的一些交互，以这种方式标记的任何标题都会出现以下行为： (1) 将其子项隐藏在左导航中。(2) 单击时，防止jumptarget类从顶部标题下方滚动出来。(3) 单击时，在左侧导航中折叠其父级。

所以总而言之，我们的困境是：我们对左侧导航链接的修复导致我们的文本链接断开。然而，我们对文本链接的修复破坏了我们的左导航修复。

如果有人在 Tripit Slate 或tocify或其他框架上全局解决了这个问题，我们将非常感谢您的指点。干净的 CSS、hacky HTML 或 jivey JavaScript——我们是不可知论者。谢谢！

[2016 年 7 月 13 日更新：] 这是我们的开发人员添加到的脚本layout.erb，用于清除链接目标被持久标头隐藏。我们正在测试它是否适用于所有链接。非常邀请评论：

任何人都可以建议使用 jquery tocify 插件或引导 toc 类是否可以修复 div 高度。在这两种情况下，我都可以在我的代码中应用 toc（目录）。但是当我点击左平面时，整个页面开始滚动。我希望只有具有固定高度滚动的内容而不是页眉和页脚。

其他 jquery 和 bootstrap 包含在 head 标签中。

现在当我点击快捷方式整个页面滚动时。我不想标题滚动。同样在固定 div 的高度之后。我也会插入页脚。感谢您的任何建议。

我正在尝试使用 Bootstrap 4.5 跨 3 列组织一些元素。

中心柱将有一个长的身体。

右列的内容（2 个 div）应该贴在顶部/底部。我很难让底部元素粘住。元素自动扩展，我希望它从底部自动扩展。

我在右列顶部使用 Tocify 作为我的 ToC。

左列有几个 div。顶部 div 是一个横幅，我想把它卡在那里。其余的 div 不太重要。根据视口的大小，此列可能会溢出，在这种情况下，我希望此左列有一个独立的滚动条。应该有 2 个独立的滚动条（网页滚动和左面板滚动）。

这是一个带有示例的引导加载小提琴（用很长的正文来演示问题）：https ://jsfiddle.net/x1nhrwtf/5/

CSS 尝试：