通过跟踪指向该部分内部的锚链接来切换隐藏部分-解网

问：

我正在开发一个游戏规则网站，我觉得改善用户体验的一种方法是让较大的部分（如果我能做到这一点，也许是较小的子部分）开始折叠，但可以通过单击它们的部分标题（通常是 H1 标签，但也可能是 H2 或 H3）来展开。效果很好，但后来我意识到我有很多指向 div 的锚链接，这些 div 具有 ID 属性，这些属性位于较大部分内，这些属性不会触发切换功能。

这是我的代码的简化版本：

function secToggle(i) {
  if (i.style.display === "none") {
    i.style.display = "block"
  } else {
    i.style.display = "none";
  }
}

.secToggle {
  display: none;
  border: 1px dotted transparent;
  border-radius: 10px;
}

section:target {
  display: block;
}

.secToggle:hover {
  border-color: black;
}

.secToggleHeading:hover {
  cursor: pointer;
}

.secToggle:focus-within {
  display: block;
}

<p>Test link: <a href="#SpecificTopic">Click Here</a></p>

<h1 class="secToggleHeading" id="Subject1" onclick="secToggle(secSubject1)">Header 1</h1>
<section class="secToggle" id="secSubject1">
  <p>Some content</p>
  <p id="SpecificTopic">Specific Topic</p>
  <p>Some other content</p>
</section>

我想以非侵入性的方式调用每个部分的内容，以便用户知道他们可能想要折叠回去的部分包含哪些内容，因此虚线边框和 .:hover

正如你所看到的，我玩了一点和，但似乎都没有任何效果。我有一种感觉，我需要用 JS（如果是库，最好是 JQuery）来做这件事，但是我尝试的每个谷歌搜索排列都会返回与此类似的更简单问题的答案。:target:focus-within

我还要提到，我也有“在 div 实际可切换之前需要单击一次以激活 onclick 事件”的问题，但我觉得这只是选择我找到的几个解决方案中的哪一个的问题。不过，我想我会提到它，以防它以某种方式参与解决这个问题。

javascript html jquery ， css

第一次激活问题需要点击两次是由于您检查 - 调试是什么 - 第一次点击时它将是空白/null，因为它被 css 隐藏，而不是被内联样式隐藏 - 所以首先点击 => else 并隐藏它（但它已经隐藏了） - 所以你需要再次点击才能显示它。将更改为然后它将选择默认值（空白）以及“none”if (i.style.display === "none") {i.style.displayifif (i.style.display !== "block") {

1赞 ChromWolf 11/16/2023

哇---这太棒了！@Yogi完全符合我对可折叠部分的需求（并且，就其性质而言，还解决了“需要单击两次”的问题！），并且@freedomn-m，该小提琴不仅表明它处理了我的特定问题，而且我还可以在两者中使用其他标签！我仍然处于学习 webdev 的“初学者”阶段，但即便如此，我认为这激发了我尽可能多地审查标签---我不知道 Details 作为标签存在！<details><details><summary>

答：

0赞 PeterJames 11/22/2023 #1

正如评论中提到的，这可以通过已经执行此操作的元素来实现，而无需任何 JavaScript（参见 MDN 上的详细信息披露元素。htmldetails

下面的代码演示了通过单击以这种方式激活时如何以及何时展开。details

链接到元素本身不会扩展内容，而链接到元素内部会扩展内容。iddetailsiddetails

此外，还可以设置元素内容的样式，例如，通过将内容包装在 a 中并使用应用 a 和颜色。detailsdivborderbackgroundCSS

summary {
  font-weight: bold;
  font-size: 18pt;
}

details>div {
  border: solid 2px black;
  background: lightgrey;
}

<p><a href="#SpecificSummary">LINK: Click to go to the summary/header and expand the content</a></p>
<p><a href="#SpecificHeader">LINK: Click to go to the summary/header without expanding content</a></p>
<p><a href="#SpecificTopic">LINK: Click to go to a specific topic within the summary</a></p>

<h4>Before clicking on the links above, collapse the content below by clicking on the down arrow (see below in the middle of the Lorem ipsum text)</h4>

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur enim eveniet ratione voluptatum! Accusamus amet beatae, consequatur cupiditate ducimus enim ex inventore iure laborum, necessitatibus nesciunt porro quasi quibusdam quos rem repellat
  sapiente tempore voluptates?
</p>
<p>
  Asperiores aut deleniti expedita hic inventore laudantium nam placeat praesentium quaerat quas, quis saepe voluptatibus. Ad aliquid animi consectetur deleniti ducimus earum ex illo illum ipsum itaque laboriosam magnam minima necessitatibus nemo nobis
  officiis omnis quia recusandae repellendus rerum sequi similique soluta tempora tenetur, unde velit voluptas! Ab accusantium ad commodi, dolores ea eaque numquam, placeat quasi quisquam, reiciendis sapiente totam veritatis vero.
</p>
<p>
  Aliquam dolore incidunt officia quis unde! Alias atque debitis ducimus excepturi fugiat ipsa nesciunt nisi, nostrum placeat totam. Ad consequatur facere incidunt nam quod repudiandae. Aut dolorum ea eos esse est facere fuga labore laboriosam libero officia,
  officiis praesentium recusandae vero? Corporis eius impedit incidunt molestiae quos. Assumenda nemo perferendis possimus quam repellendus rerum, unde! Delectus, dicta expedita hic inventore placeat quaerat reprehenderit similique vel velit voluptatibus!
  Ab aperiam fugiat magnam omnis recusandae sunt voluptas! Ad adipisci asperiores aspernatur autem deserunt dolore error est, excepturi facilis fugit ipsa molestias nihil nobis non nostrum numquam possimus quaerat rerum sint tempore, unde vitae voluptatem.
</p>

<details id="SpecificHeader">
  <summary id="SpecificSummary">This is a summary or header</summary>
  <div>
    <p>Some content</p>
    <p id="SpecificTopic">Specific topic</p>
    <p>Some other content</p>
  </div>
</details>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur enim eveniet ratione voluptatum! Accusamus amet beatae, consequatur cupiditate ducimus enim ex inventore iure laborum, necessitatibus nesciunt porro quasi quibusdam quos rem repellat
  sapiente tempore voluptates? Asperiores aut deleniti expedita hic inventore laudantium nam placeat praesentium quaerat quas, quis saepe voluptatibus. Ad aliquid animi consectetur deleniti ducimus earum ex illo illum ipsum itaque laboriosam magnam minima
  necessitatibus nemo nobis officiis omnis quia recusandae repellendus rerum sequi similique soluta tempora tenetur, unde velit voluptas! Ab accusantium ad commodi, dolores ea eaque numquam, placeat quasi quisquam, reiciendis sapiente totam veritatis
  vero.
</p>
<p>
  Aliquam dolore incidunt officia quis unde! Alias atque debitis ducimus excepturi fugiat ipsa nesciunt nisi, nostrum placeat totam. Ad consequatur facere incidunt nam quod repudiandae. Aut dolorum ea eos esse est facere fuga labore laboriosam libero officia,
  officiis praesentium recusandae vero? Corporis eius impedit incidunt molestiae quos.
</p>
<p>
  Assumenda nemo perferendis possimus quam repellendus rerum, unde! Delectus, dicta expedita hic inventore placeat quaerat reprehenderit similique vel velit voluptatibus! Ab aperiam fugiat magnam omnis recusandae sunt voluptas! Ad adipisci asperiores aspernatur
  autem deserunt dolore error est, excepturi facilis fugit ipsa molestias nihil nobis non nostrum numquam possimus quaerat rerum sint tempore, unde vitae voluptatem.
</p>

上一个：使用 onchange 参数选择排序选项时如何重新加载页面

下一个：如何创建负责任的导航底部仪表板 [已关闭]

通过跟踪指向该部分内部的锚链接来切换隐藏部分

Toggling a hidden Section by following an anchor link that points to inside the section

评论