Question

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

我想要实现的是当点击导航中的链接时，它将滚动到手风琴所在的那个部分并打开手风琴，同时给它类.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');
    });
});

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

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

Answer 1

首先，请确保我理解正确：您要打开由单击的导航条目表示的手风琴条目，并且您想将其滚动到顶部。正确？

方法（尽可能使浏览器友好）将利用location.hash。我让你成为jsfiddle因为hashchange似乎在stackoverflow小提琴atm中没有正常工作。

JavaScript部分（vanilla 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; }

从固定导航打开并滚动到手风琴锚

1 个答案: