javascript - 从固定导航打开并滚动到 Accordion anchor

Question

我目前正在使用固定导航，我试图用它来控制它下面的 Accordion 。

我想要实现的是，当单击导航中的链接时，它将滚动到 Accordion 所在的部分并打开 Accordion ，同时给它类 .open (使其本质上处于事件状态)。

当单击另一个链接时，前一个 Accordion 将关闭，新的 Accordion 将打开(同时将内容放置在浏览器窗口的顶部)

目前我已经设置了固定导航滚动到正确位置的位置(几乎 - 当一个 Accordion 打开而另一个关闭时，如果 Accordion 的内容比另一个多，则位置未正确对齐)

我创建了一个糟糕的脚本，用于在单击导航链接时打开和关闭 Accordion ，但它非常庞大且效率低下:

$(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');
    });
});

这是我当前的代码:http://codepen.io/algib/pen/QbxPKG

有关正确打开和关闭我的 Accordion 以及确保打开和关闭时 Accordion 内容在顶部可见的任何帮助或指导。

Answer 1

首先让我们确保我对您的理解正确:您想要打开由单击的导航条目表示的 Accordion 条目，并且想要将其滚动到顶部。对吗？ p>

方法(使其尽可能对浏览器友好)是利用location.hash。我给你做了一个jsfiddle因为 hashchange 似乎在 stackoverflow fiddles atm 中无法正常工作。

JavaScript 部分(普通 js，如果需要，您可以用 $ 替换 querySelector)很简单

var sections = document.querySelectorAll('section');

// https://developer.mozilla.org/en-US/docs/Web/Events/hashchange
// gives you a polyfill if you need it.
window.addEventListener('hashchange', function(event) {
  [].forEach.call(sections, function(element) {
    element.classList.remove('active');
  }); 
  document.getElementById(location.hash.substring(1)).classList.add('active');
});

html 为

<nav>
  <a href="#a-section">the nav entry for section a</a>
</nav>
<article><!-- the accordion, can be any block -->
  <section id="a-section">
    <header><h1><a href="#a-section">section header, always visible</a></h1></header>
    <p>anything else only visible if section has <code>class="active"</code></p>
  </section>
</article>

编辑:我忘记复制必要的CSS。我的错。

section > * { display: none; }
section.active > *,
section > header { display: block; }