通过链接打开可折叠部分

问题描述

我制作的页面具有可扩展/可折叠的部分，但是我不知道如何从导航链接中打开它们。单击可扩展/可折叠部分时，它们会按我的期望进行扩展，并且我的导航链接将我带到正确的部分，但是，除了将我带到该链接之外，我还希望导航链接扩展相应的部分页面的一部分。我是个新手，所以我们将不胜感激。

这是我的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.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 />

这是我的代码的一个小提琴手：

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

解决方法

考虑在链接上使用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>

然后，您可以将click事件监听器添加到所有链接中，以及当用户单击时 链接，展开内容。您可以使用以下内容：

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";
        }
    })
})

,

一种选择是将onClick事件添加到导航链接，该链接运行用于扩展相应部分的代码。

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

,

您在这里！我在您的链接中添加了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.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 />