jQuery Accordion: los enlaces no funcionan
https://stackoverflow.com/questions/332384
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy trabajando en una página utilizando el elemento de interfaz de usuario del acordeón de jQuery. Modelé mi HTML en ese ejemplo, excepto que dentro de los elementos <li>, tengo algunas listas de enlaces desordenadas. Así:
$(document).ready(function() {
$(".ui-accordion-container").accordion(
{active: "a.default", alwaysOpen: true, autoHeight: false}
);
});
<ul class="ui-accordion-container">
<li> <!-- Start accordion section -->
<a href='#' class="accordion-label">A Group of Links</a>
<ul class="linklist">
<li><a href="http://example.com">Example Link</a></li>
<li><a href="http://example.com">Example Link</a></li>
</ul>
<!--and of course there's another group -->
Problema: los enlaces no funcionan
En todos los navegadores que he probado, los enlaces en esos menús de acordeón hacen que la sección de acordeón se colapse en lugar de llevarlo a la página vinculada. (Todavía puedo hacer clic derecho e ir al sitio vinculado).
¿Podría ser algún tipo de problema de enlace de clic?
Solución
Por defecto, el widget acordeón establece todos los enlaces a los encabezados. Para cambiarlo, debe especificar un selector con la opción headers. Entonces, su código se vería así:
$(".ui-accordion-container").accordion(
{ active: "a.default", ..., header: "a.accordion-label" }
);
Otros consejos
Intente agregar un onlick en línea que evite la propagación de eventos:
...
<a href='#' onclick="event.stopPropagation()" class="accordion-label">A Group of Links</a>
...
O un evento domready como este:
$(".toggle-title a").click(function(event){ event.stopPropagation()})
Sin embargo, este último no funcionó para mí a pesar de que el código tiene sentido, ¡jQuery ejecuta el clic! Cualquiera que me pueda explicar eso, siéntase libre, vengo de MooTools y el fondo de Google Closure que tiene funciones addEvent.
Tuve exactamente el mismo problema y no pude encontrar una respuesta en ningún lado. De hecho, un par de fuentes dijeron que simplemente no se podía hacer.
Al seguir jugando, encontré una solución que funciona. Puede que no sea genial, pero funciona a las mil maravillas.
Primero, solo asegúrese de que los enlaces en los que desea que se pueda hacer clic y que sean inmunes a los controles de acordeón sean fácilmente identificables. Tuve una clase en la mía.
$('.stats a').click(function(){
expander.accordion('disable');
window.open($(this).attr('href'));
setTimeout ( function() {
expander.accordion('enable');
}, 250 );
});
Esencialmente, esto escucha cuando se hace clic en un enlace dentro del encabezado del acordeón. Cuando es así, el acordeón se desactiva temporalmente, evitando que se active normalmente. El enlace se abre, en este caso, en una nueva ventana, pero también puede usar document.location
Si volvemos a habilitar el acordeón de inmediato, seguirá disparando y activando el acordeón. Descubrí que un tiempo de espera súper corto proporciona suficiente retraso.
¡Espero que esto ayude a alguien!
aquí hay una solución realmente simple
AlwaysOpen debería ser verdadero.
Puede que mi sugerencia no sea utilizar la función acordeón (), [que no sabía antes, gracias por mencionarlo :)] pero aún así mostrar cómo tener un elemento de interfaz de usuario de acordeón.
HTML
<body id="body">
<h2>Accordian</h2>
<div id="accordion" class="">
<div class="toggle_all">
<ul class="links">
<li><a class="openall" href="#"><span>Open All</span></a></li>
<li>|</li>
<li><a class="closeall" href="#"><span>Close All</span></a></li>
</ul>
</div>
<!-- toggleAll ends -->
<div class="accordion">
<div class="section_title_accordion design-gray">
<h3><a href="#" class="open"><span>Lorem ipsum</span></a></h3>
</div>
<!-- section_title_accordion ends -->
<div class="accordion_content"> <span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </div>
<!-- accordion_content ends -->
</div>
<!-- accordion ends -->
<div class="accordion">
<div class="section_title_accordion design-gray">
<h3><a href="#" class="open"><span>Lorem ipsum</span></a></h3>
</div>
<!-- section_title_accordion ends -->
<div class="accordion_content"> <span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </div>
<!-- accordion_content ends -->
</div>
<!-- accordion ends -->
<div class="accordion">
<div class="section_title_accordion design-gray">
<h3><a href="#" class="open"><span>Lorem ipsum</span></a></h3>
</div>
<!-- section_title_accordion ends -->
<div class="accordion_content"> <span class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </div>
<!-- accordion_content ends -->
</div>
<!-- accordion ends -->
</div>
<!-- #accordion ends -->
</body>
CSS
<style type="text/css" >
#body { margin-left:20%; font:12px verdana; }
.accordion { width:500px; }
h3 { margin:0; padding:0; }
.section_title_accordion { float:left; width:500px; margin:2px 0 0; }
.section_title_accordion h3 span { margin:0; float:left; color:#fff; padding:2px 0 3px 10px; }
.section_title_accordion a span { padding-left:20px; }
.accordion_content { border-bottom:1px solid #666666; border-left:1px solid #666666; border-right:1px solid #666666; float:left; padding:5px 3px; }
.accordion_content span.content { margin:5px 0 0; }
.design-gray { background:#003366; }
.design-gray a { color:#fff; float:left; width:100%; height:22px; background:#003366; text-decoration:none; }
.design-gray a:hover { text-decoration:underline;}
.on .design-gray a { color:#fff; float:left; width:100%; height:22px; background:#003366;}
.accordion_content_hover { background:#ffffcc; color:#000099; }
.toggle_all { padding:20px 0; width:500px; margin-bottom:5px; }
.toggle_all ul { padding:0; margin:0; }
.toggle_all ul li { list-style-type:none; }
.toggle_all .links li { float:left; padding-left:5px; }
.toggle_all .links li a, .toggleAll .links span { color:#666666; }
</style>
jQuery
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$(".accordion_content").hide();
$("a.open").click(function() {
$(this).parents(".accordion").find(".accordion_content").toggle();
$(this).parents(".accordion").toggleClass('on');
return false;
});
$(".accordion_content").mouseover(function() {
$(this).addClass('accordion_content_hover');
return false;
});
$(".accordion_content").mouseout(function() {
$(this).removeClass('accordion_content_hover');
return false;
});
$("a.openall").click(function() {
$(".accordion_content").show();
$(this).parents("#accordion").find(".accordion").addClass('on');
return false;
});
$("a.closeall").click(function() {
$(".accordion_content").hide();
$(this).parents("#accordion").find(".accordion").removeClass('on');
return false;
});
});
</script>
Espero que esto ayude.
Aquí hay una posible secuencia de comandos alternativa para cualquiera que todavía experimente este problema: http://twostepmedia.co.uk/notes/development/jquery-accordion/
Como dice mi respuesta a su otra pregunta:
navigation: true
Debe establecerse en su lista de opciones.
