Открытие и прокрутка аккордеона с фиксированной навигации

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 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> 

Edit: Я забыл скопировать необходимый css. Виноват.

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