导出html标记中的可折叠标题/手风琴

Question

我正在努力实现一个网页，每个h2充当手风琴的项目。单击时，标题下的内容应展开(隐藏后)。

我读过很多教程，但它们通常使用特定的html (使用链接或按钮)，但是我的html是从标记语言(orgmode)导出的，所以不能以这种方式定制(至少我不喜欢)。我还没能修改其中任何一个来满足我的需要。

我不确定最好的解决方案是否会使用css或javascript，或者两者都使用。以下是html主体：

  <div id="content">
    <h1 class="title">Recipes</h1>

    <div id="outline-container-org233deb6" class="outline-2">
      <h2 id="org233deb6">Tea</h2>
      <div class="outline-text-2" id="text-org233deb6">
      </div>
      <div id="outline-container-orgfbba0f7" class="outline-3">
    <h3 id="orgfbba0f7">Ingredients</h3>
    <div class="outline-text-3" id="text-orgfbba0f7">
      <ul class="org-ul">
        <li>1 tbsp tea leaves</li>
        <li>1 cup water</li>
      </ul>
    </div>
      </div>
      <div id="outline-container-orgcc98fa7" class="outline-3">
    <h3 id="orgcc98fa7">Instructions</h3>
    <div class="outline-text-3" id="text-orgcc98fa7">
      <ol class="org-ol">
        <li>Boil some water</li>
        <li>Put in tea leaves</li>
        <li>Strain</li>
      </ol>
    </div>
      </div>
    </div>
  </div>

据我所知，我试图在单击outline-3中的h2时隐藏/显示outline-2类。

Answer 1

由于无法控制标记，所以您可以这样解决这个问题：

​

const headerH2 = document.querySelectorAll('#content h2'); // first we put all wanted headers on variable
const outlinContent =  document.querySelectorAll("div[class^=outline]"); // you can use regex to catch all div begining with 'outline-'
outlinContent.forEach(function(item){  if (item.id !== 'outline-container-org233deb6') { item.classList.add('hide'); }  }); // hide  them, skipping the one contain the trigger
headerH2[0].addEventListener('click', function() { // adding click listener to the first (or the only one in this example
  outlinContent.forEach(function(item){  if (item.id !== 'outline-container-org233deb6') {item.classList.toggle('hide'); } }); // toggle content display
});

.hide {display: none;}

<div id="content">
  <h1 class="title">Recipes</h1>
  <div id="outline-container-org233deb6" class="outline-2">
    <h2 id="org233deb6">Tea</h2>
    <div class="outline-text-2" id="text-org233deb6">CONTENT</div>
    <div id="outline-container-orgfbba0f7" class="outline-3">
      <h3 id="orgfbba0f7">Ingredients</h3>
      <div class="outline-text-3" id="text-orgfbba0f7">
        <ul class="org-ul">
          <li>1 tbsp tea leaves</li>
          <li>1 cup water</li>
        </ul>
      </div>
    </div>
    <div id="outline-container-orgcc98fa7" class="outline-3">
      <h3 id="orgcc98fa7">Instructions</h3>
      <div class="outline-text-3" id="text-orgcc98fa7">
        <ol class="org-ol">
          <li>Boil some water</li>
          <li>Put in tea leaves</li>
          <li>Strain</li>
        </ol>
      </div>
    </div>
  </div>
</div>

​

使内容可折叠：

注意:在本例中，我使用h2作为触发器和兄弟级div来保存内容。

​

const headerH2 = document.querySelectorAll('#content h2'); // first we put all wanted headers on variable
for (let i=0; i < headerH2.length; i++) { // you can use the modarn forEach, but this is much faster
  let nextDiv = headerH2[i].nextElementSibling; // this is how you select the next element after the header
  nextDiv.classList.add('hide'); // we hide all of them by default
  headerH2[i].addEventListener('click', function() { // now we are adding click listener:
  if (document.querySelector('#content div:not(.hide)')) {document.querySelector('#content div:not(.hide)').classList.add('hide')}; // this will close other open content divs if they exist
  nextDiv.classList.remove('hide'); // this will show the right content when click
  });
}

.hide {display: none;}

<div id="content">
  <h2>TITLE 1</h2>
  <div>CONTENT 1</div>
  <h2>TITLE 2</h2>
  <div>CONTENT 2</div>
  <h2>TITLE 3</h2>
  <div>CONTENT 3</div>
  <h2>TITLE 4</h2>
  <div>CONTENT 4</div>
  <h2>TITLE 5</h2>
  <div>CONTENT 5</div>
  <h2>TITLE 6</h2>
  <div>CONTENT 6</div>
</div>

​

顺便提一句，html5有一个[details] 元素，它创建一个信息公开小部件，只有当小部件切换到“开放”状态时，信息才是可见的，并且应该在这里使用以获得语义和SEO等.

在一些有用的MDN链接中，您可以学到更多：

querySelectorAll

nextElementSibling

*不是选择器

希望能解决你的问题，并帮助其他人解决类似的问题。享受密码吧！