Menu "actif" accordéon Après avoir cliqué sur

Question

Je suis en train de mettre le menu d'accordéon "actif" après un clic sur le lien et changer la page ...

<div class="menu"> 
     <dl> 
      <dt><a href="index.asp">HOME</a></dt> 
      <dt><a href="#" class="submenu">QUEM SOMOS</a></dt> 
       <dd> 
        <ul> 
         <li><a href="empresa.asp">EMPRESA</a></li> 
         <li><a href="institucional.asp">INSTITUCIONAL</a></li> 
         <li><a href="nossos_produtos.asp">NOSSOS PRODUTOS</a></li> 
         <li><a href="responsabilidade_social.asp">RESPONSABILIDADE SOCIAL</a></li> 
         <li><a href="responsabilidade_ambiental.asp">RESPONSABILIDADE AMBIENTAL</a></li> 
        </ul> 
       </dd> 
      <dt><a href="#" class="submenu">PRODUTOS</a></dt> 
       <dd> 
        <ul class="produtos"> 
         <%do while not rscat.EOF%> 
         <li><a href="produtos_categoria.asp?categoria=<%= rscat("categoria")%>"><%= rscat("categoria")%></a></li> 
         <% rscat.MoveNext 
         if rscat.EOF then Exit do %> 
         <% Loop %> 
        </ul> 
       </dd> 
      <dt><a href="informativo.asp">INFORMATIVO</a></dt> 
      <dt class="no_border"><a href="contato.asp">CONTATO</a></dt> 
     </dl> 
    </div> 

jquery:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('dd').hide(); 
     $('dt a.submenu').click(function(){ 
      $("dd:visible").slideUp("slow"); 
      $(this).parent().next().slideDown("slow"); 
      return false; 
     }); 
    }); 
</script> 

i essaie aussi utiliser ce https://stackoverflow.com/questions/10681033/accordion-menu-active-state-after-link-click mais ne fonctionnent pas ...

ce que j'essaie (mais ne fonctionne pas):

<script type="text/javascript"> 

     $(document).ready(function(){ 
      $('dd').hide(); 

      var sPath = window.location.pathname; 
      var sPage = sPath.substring(sPath.lastIndexOf('/') + 1); 
      $("dt a.submenu[href='" + sPage + "']").parents("dd:visible").show(); 


      $('dt a.submenu').click(function(){ 
       $("dd:visible").slideUp("slow"); 

       var checkElement = $(this).next(); 
       if ((checkElement.is("dd")) && (checkElement.is(":visible"))) { 
        return false; 
       } 
       if ((checkElement.is("dd")) && (!checkElement.is(':visible'))) { 
        $(this).parent().next().slideDown("slow"); 
        checkElement.slideDown("normal"); 
        return false; 
       } 

      }); 


     }); 
    </script> 

Eh bien, les premiers sublinks ul points à pages spécifique dans, mais une autre sublink ul class=produtos montrent les catégories qui se trouve sur la base de données, et utilise même lien sur chacune des catégories comme: produtos_categoria.asp?categoria=xxxxxx ...

Si l'utilisateur, cliquez sur " EMPRESA ", sur la page empresa.asp le menu QUEM SOMOS doit être ouvert. Et si l'utilisateur clique sur certaines catégories dans le menu PRODUTOS, sur la page produtos_caegoria.asp le PRODUTOS doit être ouvert ..

Je suis clair?

Alors ... qu'est-ce que je dois faire?

VIOLON: http://jsfiddle.net/Qf7Js/1/

Answer 1

check this jsfiddle pour voir si cela répond à vos besoins. Autant que je puisse comprendre le problème, vous voulez, au chargement de la page, ouvrir automatiquement le menu accordéon qui contient le lien actuel. Ceci peut être réalisé avec le code suivant

//say this is the current link which can be retrieved in real website using window.location object 
var init_link = 'institucional.asp' 

//then instead of hiding all <dd>, using $('dd').hide(), you only hide the ones that don't contain an <a> that has href equal to init_link. 
$('dd').filter(function() { 
    return $('a[href="' + init_link + '"]', $(this)).length == 0 
}).hide(); 

Il suffit de changer la valeur init_link à ce que l'URL actuelle. Méfiez-vous de la partie nom d'hôte car votre <a> ne contient peut-être pas d'URL absolue. Cela pourrait aider Get current URL in web browser.

Pour obtenir URL currnet sans la partie de nom d'hôte, vous pouvez (non doit) utiliser le code suivant

var init_link = window.location.href.replace(window.location.protocol+'//'+window.location.hostname+'/', '') 

Answer 2

Pour clarifier, il semble que tout ce que vous cherchez à faire est d'appliquer une classe à l'dt en plus de masquer/afficher l'élément suivant dd? Cela peut être réalisé avec des fonctions de rappel, ou simplement en enchaînant la méthode. Quelque chose comme ceci:

<script type="text/javascript"> 
$(document).ready(function(){ 
    var $menu = $('dl.menu'); 
    $('dd', $menu).hide(); 
    $('dt a.submenu', $menu).on("click", function(e){ 
     e.preventDefault(); 
     var $parent = $(this).parent('dt'); 
     if($parent.hasClass('active')){ 
      $parent.removeClass('active').next('dd').slideUp("slow"); 
     } else { 
      $parent.siblings('.active').removeClass('active').siblings("dd").slideUp("slow", function(){ 
      $parent.addClass('active').next('dd').slideDown("slow"); 
      }); 
     } 
     $("dd:visible", $menu).slideUp("slow", function(){ 
      $(this).removeClass('active'); 
     }); 
     $(this).parent().next().slideDown("slow"); 
    }); 
}); 
</script> 

Espérons que cela aide à fournir une direction.