Slate Docs 功能可在单击侧边栏中的其他链接时保持导航手风琴打开

Posted 2023-03-05

【中文标题】Slate Docs 功能可在单击侧边栏中的其他链接时保持导航手风琴打开

【英文标题】：Slate Docs function to keep navigation accordion open when clicking on other links in sidebar

【发布时间】：2021-12-24 06:35:36

【问题描述】：

对于 UX，有时可能需要在侧边栏中同时打开多个部分。目前，当在侧边栏中单击另一个部分标题时，其他部分会折叠。我如何做到这一点，只有当我单击部分标题本身时，所有部分才打开和关闭

这是处理此问题的代码：

var $best = $toc.find("[href='" + best + "']").first();

  if (!$best.hasClass("active")) 
    // .active is applied to the ToC link we're currently on, and its parent <ul>s selected by tocListSelector
    // .active-expanded is applied to the ToC links that are parents of this one
    $toc.find(".active").removeClass("active");
    $toc.find(".active-parent").removeClass("active-parent");
    $best.addClass("active");
    $best
      .parents(tocListSelector)
      .addClass("active")
      .siblings(tocLinkSelector)
      .addClass("active-parent");
    $best.siblings(tocListSelector).addClass("active");
    $toc.find(tocListSelector).filter(":not(.active)").slideUp(150);
    $toc.find(tocListSelector).filter(".active").slideDown(150);
    if (window.history.replaceState) 
      window.history.replaceState(null, "", best);
    
    var thisTitle = $best.data("title");
    if (thisTitle !== undefined && thisTitle.length > 0) 
      document.title =
        thisTitle.replace(htmlPattern, "") + " – " + originalTitle;
     else 
      document.title = originalTitle;
    
  

【问题讨论】：

到目前为止你尝试了什么？最好贴一些代码

到目前为止，我可以禁用菜单扩展并使其在我单击另一个菜单时所有菜单保持打开状态，但我无法在单击其父菜单时关闭菜单

【参考方案1】：

以下 2 行是关闭之前选择的部分的位置。

    $toc.find(".active").removeClass("active");
    $toc.find(".active-parent").removeClass("active-parent");

将它们注释掉，每个部分都会提醒打开。

编辑：为了能够在您单击该部分时关闭它，您需要将 .addClass 方法替换为 toggleClass documentation。这样，active 类会在不存在的情况下添加并在相反的情况下删除。

【讨论】：

我这样做了，但无法再次关闭它们。当您单击标题时，我无法实现关闭该部分的功能