2012-08-17 16 views
20

Estoy usando twitter-Bootstrap 2.04, y estoy usando la última jQuery. Estoy tratando de hacer un enlace que vaya de una página a la página que contiene este acordeón, y luego active la sección de acordeón apropiada. Este es el acordeón:Vinculación a una sección de un acordeón desde otra página

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

Este es el enlace:

<a href="page.html/#Alink2">Link to some interesting stuff</a> 

Con ligarse a sólo un poco en la página por lo general funciona bien, ¿necesito utilizar Javascript para activarlo?

+0

Esto no funciona para mí en el sitio de arranque de twitter con su ejemplo, así que estoy asumiendo que no es por defecto la funcionalidad. – Jeemusu

+0

Necesita tener el jScript correcto adjunto al archivo, funciona bien. –

Respuesta

28

Sí, tendrá que activar manualmente al cargar la página. Algo parecido a lo siguiente debería funcionar:

$(document).ready(function() { 
    location.hash && $(location.hash + '.collapse').collapse('show'); 
}); 

Además, como se señaló @SaadImran, esto supone que se vincula al elemento plegable Identificación del lugar del nombre en el anclaje (por ejemplo, #Alink2 (por ejemplo, #collapseTwo.).)

+3

+1, Debería señalar que OP necesitaría usar el enlace 'page.html # collapseOne' en lugar de' page.html # Alink1' –

2

Has probado esto:

<a href="page.html#Alink2">Link to some interesting stuff</a> 
+1

Eso vincula a la página, pero no a la sección de acordeón. –

8

Gracias por su ayuda.
que añaden funcionalidad para que el código puede abrir Acordeones Acordeones DENTRO:

$(document).ready(function() { 
    if (location.hash){ 
    $(location.hash).collapse('show'); 
    $(location.hash).parents('.accordion-body').collapse('show'); 
    } 
}); 
+0

¡Muy útil! gracias. –

3

Puede utilizar la posición de la sección de acordeón. El siguiente enlace abre la tercera sección de acordeón en un acordeón de twitter bootstrap (wordpress).

Enlace Ejemplo: http://www.zfp-bauwesen.de/leistungen/ubersicht#3

Código 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; 
     } 
    } 

}); 
Cuestiones relacionadas