Question

我有一个图像，其中包含指向包含列表的另一个HTML文件的超链接。主要目标是单击该图像并转到另一个HTML文件并扩展我在第一个文件中单击的项目。例如：在第一个文件中，我有超链接的项目 - 血腥玛丽，莫吉托，玛格丽塔和Pina colada。在第二个文件中，我有可扩展的列表，具有相同的项目。当我点击项目（在第一个文件中），例如Mojito时，它会转到第二个文件并扩展Mojito的食谱。其余的鸡尾酒保持不变。我该怎么做到？

归档一个

<article class="style1">
    <span class="image">
        <img src="images/pic01.jpg" alt="" />
    </span>
    <a href="SecondFile.html">
        <h2>Information</h2>
            <div class="content">
                <p>
                    Some info
                </p>
            </div>
    </a>
</article>

File one picture. Clickable box

第二个文件

<button class="accordion">Mojito</button>
<div class="panel">
    <div class="container-fluid">
        <p> Extendable Recipe </p>
    </div>
</div>

脚本

var acc = document.getElemntsByClassName("accordion");
var i;
for (i=0, i<acc.length, i++) {
   acc[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var panel = this.nextElemntSibling;
      if (panel.style.display==="block") {
         panel.style.display = "none";
      } else {
         panel.style.display = "block";
      }
  });
}

File two picture. Extended list

Answer 1

这可以通过多种方式完成，最简单的方法是利用现有的框架，例如bootstrap或materialize。查看他们的文档，他们都有可折叠/手风琴组件，您可以使用他们预先构建的CSS课程插入，您当然可以通过点击来调整课程，然后完成您的建议。

HTML超链接在其他文件中扩展列表

1 个答案: