jquery - plugin - shortcodes para wordpress
jQuery Accordion: los enlaces no funcionan (9)
Estoy trabajando en una página usando el elemento UI de acordeón de jQuery. Modelé mi HTML en ese ejemplo, excepto que dentro de los elementos <li> , tengo algunas listas desordenadas de enlaces. Me gusta esto:
$(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 con el botón derecho e ir al sitio vinculado).
¿Podría tratarse de algún tipo de problema de enlace por clic?
Como dice mi respuesta a tu otra pregunta:
navigation: true
Debe establecerse en su lista de opciones.
De forma predeterminada, el widget accordian establece todos los enlaces a los encabezados. Para cambiarlo, debe especificar un selector con la opción de headers . Por lo tanto, su código se vería así:
$(".ui-accordion-container").accordion(
{ active: "a.default", ..., header: "a.accordion-label" }
);
AlwaysOpen debe ser cierto.
Puede ser que mi sugerencia es no utilizar la función acordeón (), [que no conocí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.
Tenía 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.
Luego de jugar, encontré una solución de trabajo. Puede que no sea genial, pero funciona como un encanto.
En primer lugar, solo asegúrese de que los enlaces en los que desea hacer clic y que son inmunes a los controles del 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 );
});
Básicamente, esto escucha cuando se hace clic en un enlace dentro del encabezado del acordeón. Cuando lo esté, el acordeón se desactivará temporalmente, evitando que se dispare de forma normal. 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 inmediatamente, aún se disparará y alternará el acordeón. Descubrí que un tiempo de espera súper corto proporciona suficiente demora.
¡Espero que esto ayude a alguien!
aquí hay una solución realmente simple
http://www.designerstalk.com/forums/help-me/41297-jquery-accordion-embedding-links-help-needed.html
Aquí hay una posible secuencia de comandos alternativa para cualquier persona que todavía tenga este problema: http://twostepmedia.co.uk/notes/development/jquery-accordion/
Intente agregar un onlick en línea que evita el burbujeo del evento:
...
<a href=''#'' onclick="event.stopPropagation()" class="accordion-label">A Group of Links</a>
...
O un evento domready como ese:
$(".toggle-title a").click(function(event){ event.stopPropagation()})
Sin embargo, este último no funcionó para mí, aunque el código tiene sentido, ¡jQuery ejecuta el clic! Cualquiera que pueda explicarme que se siente libre, procedo de los antecedentes de MooTools y Google Closure que tienen funciones addEvent.