Ссылка на раздел Аккордеона с другой страницы
Я использую twitter-Bootstrap 2.04, и я использую последний jQuery.
Я пытаюсь сделать ссылку, которая будет идти с одной страницы на страницу, содержащую этот аккордеон, и затем активировать соответствующий раздел аккордеона.
Это аккордеон:
<div class="accordion-group">
<div class="accordion-heading">
<a name="Alink1" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<strong>Title</strong>
</a>
</div>
<div id="collapseOne" class="accordion-body in collapse" style="height: auto; ">
<div class="accordion-inner">
some random content
<div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a name="Alink2" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<strong>Title 2</strong>
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
some random content 2
<div>
</div>
</div>
Это ссылка:
<a href="page.html/#Alink2">Link to some interesting stuff</a>
С ссылкой на немного на странице работает нормально, мне нужно использовать Javascript для его активации?
Ответы
Ответ 1
Да, вам нужно будет вручную активировать его при загрузке страницы. Что-то вроде следующего должно работать:
$(document).ready(function () {
location.hash && $(location.hash + '.collapse').collapse('show');
});
Кроме того, как отметил @SaadImran, это предполагает, что вы ссылаетесь на идентификатор сбрасываемого элемента (например, #collapseTwo
), а не на имя в якоре (например, #Alink2
).
Ответ 2
Спасибо за вашу помощь.
Я добавил функциональность, чтобы код мог открыть Accordions WITHIN Accordions:
$(document).ready(function () {
if (location.hash){
$(location.hash).collapse('show');
$(location.hash).parents('.accordion-body').collapse('show');
}
});
Ответ 3
Вы можете использовать положение секции аккордеона. Следующая ссылка открывает третий раздел аккордеона на аккордеоне twitter bootstrap (wordpress).
Пример ссылки: http://www.zfp-bauwesen.de/leistungen/ubersicht#3
Код Javscript:
$( document ).ready(function() {
if (window.location.hash) {
var AccordionSectionNumber = window.location.hash.substring(1);
AccordionBodyID = $(".accordion .accordion-group:nth-of-type(" + AccordionSectionNumber + ") .accordion-heading a").attr('href')
if (! (typeof AccordionBodyID === "undefined")) {
$(AccordionBodyID).collapse('show');
return true;
}
}
});
Ответ 4
Вы пробовали это:
<a href="page.html#Alink2">Link to some interesting stuff</a>