jQuery Accordion: les liens ne fonctionnent pas

Je suis en train de travailler sur une page à l'aide de jQuery accordéon élément de l'INTERFACE utilisateur. J'ai modelé mon code HTML sur cet exemple, sauf qu'à l'intérieur de la <li> éléments, j'ai des listes non ordonnées de liens. 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é, les liens dans ces accordéon menus cause de l'accordéon, de la section de l'effondrement au lieu de prendre vous à la page liée. (Je peux encore un clic droit et aller à un site lié.)

- Ce que cela pourrait être une sorte de cliquez sur la liaison de problème?

OriginalL'auteur Nathan Long | 2008-12-01

accordion jquery

9

Par défaut, le widget accordéon jeux de tous les liens vers les en-têtes. Pour le modifier, vous devez spécifier un sélecteur avec le headers option. Donc, votre code devrait ressembler à ceci:
```
$(".ui-accordion-container").accordion(
   { active: "a.default", ...,  header: "a.accordion-label" }
);
```
Ont été à la recherche de cette réponse pour un tandis que! Notez cependant, que ce bout de code peut être dans le bootstrap.js dans le cas où vous êtes à la recherche pour elle, et non pas dans le accordion.js fichier.
Crumley cette réponse est de travailler pour moi, mais j'ai $(...).l'accordéon n'est pas une fonction d'avertissement dans la console. Toute suggestion? merci

OriginalL'auteur Matthew Crumley
5

Essayez d'ajouter une ligne onlick qui empêche la remontée d'événements:
```
...
<a href='#' onclick="event.stopPropagation()" class="accordion-label">A Group of Links</a>
...
```
Ou un domready événement de la sorte:
```
$(".toggle-title a").click(function(event){ event.stopPropagation()})
```
Cependant, cette dernière n'a pas fonctionné pour moi, même si le code sage, il fait sens, jQuery exécute le clic! Quelqu'un qui peut m'expliquer se sentir libre, je viens de MooTools et Google Fermeture de fond qui a addEvent fonctions.

C'était la seule chose qui a fonctionné pour moi (peut-être parce que j'ai un imbriquée à l'accordéon). Et j'étais en effet en mesure d'utiliser le domready événement.

OriginalL'auteur Daniel Sokolowski
4

J'ai eu exactement ce même problème et ne pouvait pas trouver une réponse, n'importe où. En fait, un couple de sources a dit qu'il ne pouvait pas être fait.

Après la lecture, j'ai trouvé une solution qui fonctionne. Peut-être pas idéal, mais il fonctionne comme un charme.

Tout d'abord, assurez-vous que les liens que vous voulez être cliquable, et le système immunitaire de l'accordéon contrôles, est facilement identifiable. J'ai eu une classe de la mienne.
```
 $('.stats a').click(function(){
expander.accordion('disable');
window.open($(this).attr('href'));

setTimeout ( function() {
  expander.accordion('enable');
}, 250 );
```
});

Essentiellement, cette écoute quand un lien à l'intérieur de l'accordéon en-tête est cliqué. Lorsqu'elle l'est, l'accordéon est temporairement désactivé, l'empêchant de tir comme d'habitude. Le lien est alors ouvert, dans ce cas, dans une nouvelle fenêtre, mais vous pouvez utiliser le document.l'emplacement de l'

Si nous ré-activé l'accordéon immédiatement, il sera toujours d'incendie et de basculer de l'accordéon. J'ai trouvé un super court délai fournit assez de retard.

Espère que cela aide quelqu'un!

OriginalL'auteur
2

ici est vraiment une solution simple

http://www.designerstalk.com/forums/help-me/41297-jquery-accordion-embedding-links-help-needed.html

OriginalL'auteur
0

AlwaysOpen doit être vrai.

OriginalL'auteur

Peut être ma suggestion n'est pas à l'aide de l'accordéon (), [ dont je ne connaissais pas avant, je vous Remercie pour le porter 🙂 ], mais encore de montrer comment avoir un Accordéon Élément de l'INTERFACE utilisateur.

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>

Espère que cette aide.

OriginalL'auteur

0

Solution
http://www.colorizate.com/jquery-acordion-hack-link-interno/

OriginalL'auteur Colorizate
0

Ici est une alternative possible de script pour ceux qui sont encore confronté à ce problème:
http://twostepmedia.co.uk/notes/development/jquery-accordion/

OriginalL'auteur fnkymnky
-1

Que ma réponse à votre question dit:
```
 navigation: true
```
Devrait être mis dans votre liste d'option.

Cela ne m'aide pas. La documentation dit "Si, cherche le point d'ancrage qui correspond à l'emplacement.href et l'active."

OriginalL'auteur Pim Jager

Vous devez vous connecter pour publier un commentaire.