设置“激活”折叠式菜单后，点击

Question

我正在尝试设置折叠式菜单“激活”点击链接后，改变网页...

<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> 

我“M尝试过，用这个https://stackoverflow.com/questions/10681033/accordion-menu-active-state-after-link-click但不工作...

我怎么努力（但不工作）：

<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> 

好了，第一子链路ul点especific页面，但另一子链路ul class=produtos显示，对数据库中的类别，并使用像每个类别相同的链接：produtos_categoria.asp?categoria=xxxxxx ...

如果用户点击“ EMPRESA“，页QUEM SOMOS菜单需要打开。如果用户点击菜单PRODUTOS下的某些类别，则在页面produtos_caegoria.asp上需要打开PRODUTOS ..

我很清楚吗？

那么..我需要做什么？

FIDDLE：http://jsfiddle.net/Qf7Js/1/

Answer 1

check this jsfiddle看看它是否符合你的要求。就我所能理解的问题而言，您希望在页面加载时自动打开包含当前链接的手风琴菜单。 这可以用下面的代码

//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(); 

只要改变init_link值什么当前的URL来实现。注意主机名部分，因为您的<a>可能不包含绝对URL。这可能有助于Get current URL in web browser。

要获得currnet URL没有主机名部分，你可以（不必须）使用下面的代码

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

Answer 2

要澄清一下，好像所有你希望做的是除了隐藏应用类的dt /显示未来dd项目？这可以通过回调函数来实现，或者通过简单地链接方法来实现。像这样的：

<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> 

希望这有助于提供一些方向。