Javascript 从固定导航打开并滚动至手风琴锚点

我目前正在使用一个固定导航，我试图用它来控制它下面的手风琴

我试图实现的是，当点击导航中的链接时，它将滚动到手风琴所在的部分，并在给它class.open（使其基本上处于活动状态）的同时打开手风琴

单击另一个链接时，上一个手风琴关闭，新手风琴打开（同时将内容放置在浏览器窗口顶部）

目前，我已经设置了固定导航滚动到正确位置的位置（如果一个手风琴比另一个手风琴有更多的内容，那么当一个手风琴打开，另一个手风琴关闭时，几乎位置没有正确对齐）

我创建了一个非常糟糕的脚本，在点击导航链接时打开和关闭手风琴，但是它非常笨重和低效：

$(function() {
    $('.history').click(function() {
        $(".submenu").eq(1).not($(this).next()).slideUp('slow');
        $(".submenu").eq(2).not($(this).next()).slideUp('slow');
        $(".submenu").eq(3).not($(this).next()).slideUp('slow');
        $(".submenu").eq(4).not($(this).next()).slideUp('slow');
        $(".submenu").eq(5).not($(this).next()).slideUp('slow');
        $('.submenu').eq(0).parent().toggleClass('open');
        $('.submenu').eq(0).slideToggle();
    });
    $('.details').click(function() {
        $(".submenu").eq(0).not($(this).next()).slideUp('slow');
        $(".submenu").eq(2).not($(this).next()).slideUp('slow');
        $(".submenu").eq(3).not($(this).next()).slideUp('slow');
        $(".submenu").eq(4).not($(this).next()).slideUp('slow');
        $(".submenu").eq(5).not($(this).next()).slideUp('slow');
        $('.submenu').eq(1).parent().toggleClass('open');
        $('.submenu').eq(1).slideToggle();
    });
    $('.school').click(function() {
        $(".submenu").eq(0).not($(this).next()).slideUp('slow');
        $(".submenu").eq(1).not($(this).next()).slideUp('slow');
        $(".submenu").eq(3).not($(this).next()).slideUp('slow');
        $(".submenu").eq(4).not($(this).next()).slideUp('slow');
        $(".submenu").eq(5).not($(this).next()).slideUp('slow');
        $('.submenu').eq(2).slideToggle();
        $('.submenu').eq(2).parent().toggleClass('open');
    });
    $('.community').click(function() {
        $(".submenu").eq(0).not($(this).next()).slideUp('slow');
        $(".submenu").eq(1).not($(this).next()).slideUp('slow');
        $(".submenu").eq(2).not($(this).next()).slideUp('slow');
        $(".submenu").eq(4).not($(this).next()).slideUp('slow');
        $(".submenu").eq(5).not($(this).next()).slideUp('slow');
        $('.submenu').eq(3).slideToggle();
        $('.submenu').eq(3).parent().toggleClass('open');
    });
    $('.sold').click(function() {
        $(".submenu").eq(0).not($(this).next()).slideUp('slow');
        $(".submenu").eq(1).not($(this).next()).slideUp('slow');
        $(".submenu").eq(2).not($(this).next()).slideUp('slow');
        $(".submenu").eq(3).not($(this).next()).slideUp('slow');
        $(".submenu").eq(5).not($(this).next()).slideUp('slow');
        $('.submenu').eq(4).slideToggle();
        $('.submenu').eq(4).parent().toggleClass('open');
    });
    $('.active').click(function() {
        $(".submenu").eq(0).not($(this).next()).slideUp('slow');
        $(".submenu").eq(1).not($(this).next()).slideUp('slow');
        $(".submenu").eq(2).not($(this).next()).slideUp('slow');
        $(".submenu").eq(3).not($(this).next()).slideUp('slow');
        $(".submenu").eq(4).not($(this).next()).slideUp('slow');
        $('.submenu').eq(5).slideToggle();
        $('.submenu').eq(5).parent().toggleClass('open');
    });
});

这是我目前的代码：

---

正确打开和关闭手风琴的任何帮助或指导，打开和关闭时，请确保手风琴内容在顶部可见。

首先，让我们确保我正确理解您的意思：您希望打开由单击的导航条目表示的手风琴条目，并将其滚动到顶部。对吧?

方法（使其尽可能对浏览器友好）是利用

location.hash

。我给你做了一个as

hashchange

似乎无法在stackoverflow fiddles atm中正常工作

JavaScript部分（vanilla js，如果需要，可以用

$

替换querySelector）非常简单

var sections=document.querySelectorAll（'section'）；
// https://developer.mozilla.org/en-US/docs/Web/Events/hashchange
//如果你需要，可以给你一个多边形填充。
window.addEventListener（'hashchange'，函数（事件）{
[]forEach.call（节、函数（元素）{
element.classList.remove（'active'）；
}); 
document.getElementById（location.hash.substring（1））.classList.add（'active'）；
});

使用html

只有当节具有
class=“active”

编辑：我忘了复制必要的css。我的错

section>*{display:none；}
section.active>*，
节>标题{显示：块；}