Почему Jquery .show() не отображает анкерный div внутри бутстрапового аккордеона?

Question

Я довольно новичок в веб-дизайне. Я несколько дней работал над этим (смущающе) и изучал все, что мог придумать.

Я использую Rails 5, bootstrap 3 и jquery 2.1.3.

У меня есть саундтрек. В пределах различных разделяющих содержимого div я хочу ссылки на контент, который находится в одном аккордеоне, но на другой панели свернуть.

В текущей панели коллапса У меня есть ссылка, как это:

<a class="self-link" href="#buried_sub_anchor">Buried Sub Anchor</a> 

В другой панели схлопывания У меня есть содержание DIV так:

<div class="anchor" id="buried_sub_anchor"> 

Моего Jquery код для обработки нажмите является:

$('.self-link').on('click', function() {expandCollapseWithHash(this.hash); }); 

    function expandCollapseWithHash(hash) { 
    var $collapses = $(hash).parents('.collapse'); 
    if ($collapses.length > 0) { 
     var $collapse = $collapses.first() 
     $collapse.collapse('show'); 
    } 
    } 

Когда .collapse ('шоу') называется Я ожидаю самозагрузки к MagiCall y закройте текущую панель и откройте цель. Затем, когда этот переход делается я ожидал «показанный» событие, чтобы огонь, который я обрабатывать как это:

$('.collapse').on('shown.bs.collapse', function() { 
    if (location.hash) { 
     $(location.hash).show(); 
    } 
    }); 

Я ожидаю .Show() вызова, чтобы перейти на нужную страницу на якорь дела. Но без кубиков.

Итак, когда я нажимаю на ссылку, я хочу:

1. Текущая панель .collapse ('скрыть')
2. Целевая панель .collapse ('шоу')
3. страницы, чтобы перейти к привязанному DIV в целевой панели

Вместо всегда:

1. Текущая панель не изменяется (т. он остается показан)
2. Мишень панели не показывать
3. страницы, перескакивает на новое место, но нигде рядом с нужной якорной сНу секции

Мои вопросы:

1. Почему не текущий крах панели? Я бы ожидал, что функция бутстрап-гармоники сделает это в результате вызова $collapse.collapse('show').
2. Почему страница не просматривается связанным контентом?

Here is a fiddle.Для воспроизведения:

1. нажмите на кнопку «Подробнее» раздела
2. прокрутки весь путь вниз
3. нажмите «Buried суб якорь» ссылка

Answer 1

Ну, я застрял на нем и, наконец, получил решение. Единственное, что я делал неправильно, - это линия $(location.hash).show();, которая должна быть location.href = location.hash;.

Это делает так, что он прыгает, чтобы показать желаемый div в самой верхней части страницы под заголовком.

Вот updated fiddle.

Внутри, щелкните заголовок панели «Подробнее», затем щелкните ссылку внутри этой панели (т. Е. «Погребенный подъякник»). Это расширит заголовок панели «Разное» и переместит страницу справа на div «Subied An Anchor text».

Вдоль пути я поднял что-то ценное. Если вышеупомянутое изменение кода было сделано мной (то есть $(location.hash).show(); ->location.href = location.hash;), при нажатии на ссылку оно расширит целевую панель и переместится туда, куда вы хотите пойти. Но это также оставило бы панель расширенной/показанной, что вы просто ушли.

Причина не была очевидна для меня и фиксируется с помощью следующего кода:

$('#accordion .panel-collapse').collapse({ 
    parent: '#accordion', 
    toggle: false 
}); 

Я нашел этот код на this github page. Он инициализирует отдельные элементы коллапса аккордеона, потому что

данные api ... lazy instantiates, то, что .collapse ('show') не учитывается.

Итак, теперь в обновленной скрипке, когда вы нажимаете ссылку, она закрывает покидающую панель, открывает целевую панель и перескакивает страницу прямо к целевому div, как раз то, что я хотел.

Answer 2

Вы должны заставить scrollTop сделать это.
Мне нравится делать это в animate(), что делает его более плавным.

Вот единственные изменения, которые я сделал для вашей Fiddle:

$('.collapse').on('shown.bs.collapse', function() { 
    if (location.hash) { 
     $(location.hash).show(); 
    } 

    var thisId = $(this).attr("id"); 
    var thisOffsetTop = $("#" + thisId).offset().top; 
    var headerHeight = $(".navbar").height(); 
    var myTitleHeight = $(".container h1").first().height(); 

    console.log(thisId); 
    console.log("thisOffsetTop: " + thisOffsetTop); 
    console.log("headerHeight: " + headerHeight); 
    console.log("MyTitleHeight: " + myTitleHeight); 

    // Animation to scrollTo the right position 
    $('html, body').animate({ 
     scrollTop: thisOffsetTop - headerHeight - myTitleHeight 
    }); 
}); 

Я оставил все соответствующие console.log() ...
Посмотреть обновленный Fiddle.