設置「激活」摺疊式菜單後，點擊

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> 

希望這有助於提供一些方向。