从 Link 打开可折叠部分

Question

我制作了一个包含 expandable/collapsible 个部分的页面，但我不知道如何让它们从导航 link 中打开。单击 expandable/collapsible 部分时，它们会按我希望的方式展开，我的导航 links 会将我带到正确的部分，但是，我也想要导航 links除了将我带到页面的那部分之外，还可以展开相应的部分。我有点新手，所以任何帮助将不胜感激。

这是我的 HTML & CSS & jQuery:

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

.collapsible {
  background-color: #eee;
  font: 15px/30px "raleway-heavy", sans-serif;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 30px;
  margin-top: 18px;
  left: 3px;
  color: #4c4c4c;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #fdc501;
  color: #ffffff;
}

.collapsed-content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  margin-bottom:30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="nav-wrap">
  <ul id="nav" class="nav">
    <li><a class="smoothscroll" href="#link1">Link 1</a></li>
    <li><a class="smoothscroll" href="#link2">Link 2</a></li>
  </ul> <!-- end #nav -->
</nav> <!-- end #nav-wrap -->
    
<!-- link1 -->
<section id="link1">
  <button type="button" class="collapsible">Link 1 Title<span style="color:#e4b101;">.</span></button>
  <div class="collapsed-content">
    <hr />
    <p>Link 1 content.</p>
  </div>
</section>
<!-- end link1 -->
    
<!-- link2 -->
<section id="link2">
  <button type="button" class="collapsible">Link 2 Title<span style="color:#e4b101;">.</span></button>
  <div class="collapsed-content">
    <hr />
    <p>Link 2 content.</p>
  </div>
</section>
<!-- end link2 -->
    
<br /><br /><br /><br /><br /><br />

这是我的代码的 jsfiddle：

https://jsfiddle.net/AceCrusher/4dporn7a/2/

Answer 1

一个选项是将 onClick 事件添加到导航 link 以运行用于展开相应部分的代码。

您当前的事件侦听器相对于处理程序附加到的“可折叠”元素处理此事件。如果您想将它重复用于按钮点击和 link 点击，则必须对其进行重新处理以接受特定的可折叠作为参数。

Answer 2

考虑在 links

上使用 data-* 属性

<li><a class="smoothscroll" href="#link1" data-target="#link1">Link 1</a></li>
<li><a class="smoothscroll" href="#link2" data-target="#link2">Link 2</a></li>

然后您可以将点击事件侦听器添加到所有 link 并且当用户点击时 link，展开内容。你可以使用这样的东西：

const links = document.querySelectorAll('.smoothscroll')

links.forEach(link => {
    link.addEventListener('click', () => {
        const section = document.querySelector(link.dataset.target)
        const content = section.querySelector('.collapsed-content')
        if (content.style.display === "block") {
          content.style.display = "none";
        } else {
          content.style.display = "block";
        }
    })
})

Answer 3

给你！我在您的链接中添加了 data-link 元素，然后发送过滤以获得好的元素。

var coll = document.getElementsByClassName("collapsible");
var navLink = document.getElementsByClassName("smoothscroll");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

for (i = 0; i < navLink.length; i++) {
  navLink[i].addEventListener("click", function() {
    var link = this.dataset.link;
    var sectionId = document.getElementById(link);

    var divToOpen = sectionId.querySelector(".collapsible");
    
    divToOpen.classList.toggle("active");
    var content = divToOpen.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

.collapsible {
  background-color: #eee;
  font: 15px/30px "raleway-heavy", sans-serif;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  margin-bottom: 30px;
  margin-top: 18px;
  left: 3px;
  color: #4c4c4c;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: leftcollapsible
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #fdc501;
  color: #ffffff;
}

.collapsed-content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  margin-bottom:30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="nav-wrap">
  <ul id="nav" class="nav">
    <li><a class="smoothscroll" data-link="link1" href="#link1">Link 1</a></li>
    <li><a class="smoothscroll" data-link="link2" href="#link2">Link 2</a></li>
  </ul> <!-- end #nav -->
</nav> <!-- end #nav-wrap -->
    
<!-- link1 -->
<section id="link1">
  <button type="button" class="collapsible">Link 1 Title<span style="color:#e4b101;">.</span></button>
  <div class="collapsed-content">
    <hr />
    <p>Link 1 content.</p>
  </div>
</section>
<!-- end link1 -->
    
<!-- link2 -->
<section id="link2">
  <button type="button" class="collapsible">Link 2 Title<span style="color:#e4b101;">.</span></button>
  <div class="collapsed-content">
    <hr />
    <p>Link 2 content.</p>
  </div>
</section>
<!-- end link2 -->
    
<br /><br /><br /><br /><br /><br />

从 Link 打开可折叠部分

Open Collapsible Section From Link

javascript

html

css

anchor

expand