Set “active” accordion menu after click

问题:

I'm trying to set accordion menu "active" after click on link and change the 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'm trying too, use this https://stackoverflow.com/questions/10681033/accordion-menu-active-state-after-link-click but dont work...

what i try (but don't work):

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

Well, the first sublinks ul point to especific pages, but the another sublink ul class=produtos show the categories that's on database, and uses same link on each categories like: produtos_categoria.asp?categoria=xxxxxx...

If the user, click on "EMPRESA", on the page empresa.asp the QUEM SOMOS menu need to be opened. And if the user click on some categories under the menu PRODUTOS, on the page produtos_caegoria.asp the PRODUTOS need to be opened..

I'm clear?

So.. what i need to do?

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

回答1:

check this jsfiddle to see if it does what you require. As far as I could understand the problem, you want to, on page load, automatically open the accordion menu that contains the current link. This can be achieved with following code

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

Just change the init_link value to what the current URL. Watch out for the hostname part because your <a> might not contain absolute URL. This might help Get current URL in web browser.

To get currnet URL without the hostname part, you could (not must) use following code

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

回答2:

To clarify, it seems like all you are looking to do is apply a class to the dt in addition to hiding/showing the next dd item? This can be achieved with callback functions, or by simply chaining the method on. Something like this:

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

Hope this helps provide some direction.