jQuery Accordion: les liens ne fonctionnent pas
https://stackoverflow.com/questions/332384
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Je travaille sur une page à l'aide de élément d'interface utilisateur de l'accordéon de jQuery. J'ai modélisé mon code HTML sur cet exemple, sauf que, à l'intérieur des éléments <li>, j'ai des listes de liens non ordonnées. Comme ceci:
$(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 -->
Problème: les liens ne fonctionnent pas
Dans tous les navigateurs que j'ai testés, les liens de ces menus accordéon entraînent la réduction de la section accordéon au lieu de vous rendre à la page liée. (Je peux toujours cliquer avec le bouton droit de la souris et aller sur le site lié.)
Pourrait-il s'agir d'un problème de liaison au clic?
La solution
Par défaut, le widget accordéon définit tous les liens dans les en-têtes. Pour le changer, vous devez spécifier un sélecteur avec l'option headers. Ainsi, votre code ressemblerait à ceci:
$(".ui-accordion-container").accordion(
{ active: "a.default", ..., header: "a.accordion-label" }
);
Autres conseils
Essayez d’ajouter un clic en ligne qui empêche la propagation des événements:
...
<a href='#' onclick="event.stopPropagation()" class="accordion-label">A Group of Links</a>
...
Ou un événement domready comme suit:
$(".toggle-title a").click(function(event){ event.stopPropagation()})
Cependant, ce dernier n’a pas fonctionné pour moi, même si du point de vue du code, cela a du sens, jQuery exécute le clic! Tous ceux qui peuvent m'expliquer que je me sens libre, je viens de MooTools et de Google Closure, qui possède des fonctions addEvent.
J'ai eu exactement le même problème et je n'ai trouvé aucune réponse nulle part. En fait, plusieurs sources ont déclaré que cela ne pouvait tout simplement pas être fait.
Après avoir joué, j’ai trouvé une solution efficace. Peut-être pas génial, mais cela fonctionne comme un charme.
Tout d'abord, assurez-vous que les liens sur lesquels vous souhaitez être cliqué et immunisés contre les contrôles de l'accordéon sont facilement identifiables. J'ai eu un cours dans le mien.
$('.stats a').click(function(){
expander.accordion('disable');
window.open($(this).attr('href'));
setTimeout ( function() {
expander.accordion('enable');
}, 250 );
});
Essentiellement, ceci écoute lorsqu'un lien dans l'en-tête de l'accordéon est cliqué. Quand c'est le cas, l'accordéon est temporairement désactivé, l'empêchant de tirer normalement. Le lien est ensuite ouvert, dans ce cas, dans une nouvelle fenêtre, mais vous pouvez également utiliser document.location
Si nous réactivions l'accordéon immédiatement, il sera toujours déclenché et basculé. J'ai constaté qu'un délai très court permettait un délai suffisant.
J'espère que cela aide quelqu'un!
voici une solution très simple
AlwaysOpen devrait être vrai.
Ma suggestion est peut-être de ne pas utiliser la fonction accordion (), [que je ne connaissais pas auparavant, merci de l'avoir soulevée :)], mais de montrer comment avoir un élément d'interface utilisateur Accordéon.
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>
J'espère que cela vous aidera.
Voici un autre script possible pour les personnes toujours confrontées à ce problème: http://twostepmedia.co.uk/notes/development/jquery-accordion/
Comme le dit ma réponse à votre autre question:
navigation: true
Doit être défini dans votre liste d'options.
