JQuery Accordéon: Ouvrir un lien au lieu de glisser vers le bas accordéon lorsque vous cliquez sur un en-tête

Question

MISE À JOUR:

$('#menu1').bind('accordionchangestart', function(e, ui) 
{ 
    console.log('accordionchangestart event triggered'); 
    e.preventDefault(); 
}); 

J'ai essayé le code ci-dessus, je reçois le message de la console, mais l'accordéon glisse toujours vers le bas. Y a-t-il un moyen d'empêcher l'accordéon de glisser sur l'événement? Je ai essayé return false et e.stopImmediatePropagation(). Aucun d'entre eux ne semble empêcher l'accordéon de glisser vers le bas.

---

Voici mon code HTML d'accordéon:

<div id="menu1"> 
    <div> 
     <h3><a href="#">Item 1</a></h3> 
     <div> 
      <a href="#">Item 1.1</a><br> 
      <a href="#">Item 1.2</a><br> 
      <a href="#">Item 1.3</a><br> 
      <a href="#">Item 1.4</a><br> 
     </div> 
    </div> 
    <div> 
    <h3><a href="item2.html">Item 2</a></h3> 
    <div></div> 
    </div> 
    <div> 
    <h3><a href="#">Item 3</a></h3> 
    <div> 
     <a href="#">Item 3.1</a><br> 
     <a href="#">Item 3.2</a><br> 
     <a href="#">Item 3.3</a><br> 
     <a href="#">Item 3.4</a><br> 
    </div> 
    </div> 
</div> 

Je veux l'accordéon à travailler normalement, sauf lorsque le lien d'en-tête n'est pas #. Par exemple, href Item 2 est item2.html. Dans ce cas, je veux qu'il fonctionne comme un lien normal et ouvre la page.

Answer 1

C'est ce que vous pouvez faire:

Le code HTML:

<div id="menu1"> 
    <div> 
     <h3><a href="#">Item 1</a></h3> 
     <div> 
      <a href="#">Item 1.1</a><br> 
      <a href="#">Item 1.2</a><br> 
      <a href="#">Item 1.3</a><br> 
      <a href="#">Item 1.4</a><br> 
     </div> 
    </div> 
    <div> 
    <h3><a href="item2.html">Item 2</a></h3> 
    <div></div> 
    </div> 
    <div> 
    <h3><a href="#">Item 3</a></h3> 
    <div> 
     <a href="#">Item 3.1</a><br> 
     <a href="#">Item 3.2</a><br> 
     <a href="#">Item 3.3</a><br> 
     <a href="#">Item 3.4</a><br> 
    </div> 
    </div> 
</div> 

Le javscript:

$(document).ready(function(){ 
    $("#menu1 div div").hide(); 
    $("#menu1 div h3 a").click(function(e){ 
     if($(this).attr("href") == "#"){  
      e.preventDefault(); 
      $("#menu1 div div").slideUp(); 
      $(this).parent().next().slideDown(); 
     } 
    }); 
}); 

Le jsfiddle

Answer 2

changer votre événement de clic pour inclure quelque chose comme ceci:

if ($(this).attr("href") != "#") { 
    window.location = $(this).attr("href"); 
    return; 
} 

Answer 3

Pouvez-vous nous montrer le plugin que vous utilisez? Ou est-ce fait maison?

Si c'est un plugin, vous pouvez aller à l'événement et dire: si href est différent de #, alors allez sur le lien.

pour l'exemple

$('h3').click(function(){ 
    if($(this).attr('href') != '#'){ return true; } 
}); 

Ou quelque chose comme ça. Difficile à dire sans le script javascript.