将“活动"设置为“活动"单击后的手风琴菜单 [英] 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>

我也在尝试，请使用此 https://stackoverflow.com /questions/10681033/accordion-menu-active-state-after-link-click 但不起作用...

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>

好吧，第一个子链接ul指向特定的页面，但是另一个子链接ul class=produtos显示数据库中的类别，并在每个类别上使用相同的链接，例如:produtos_categoria.asp?categoria=xxxxxx ...

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

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

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

我知道吗?

那么..我需要做什么?

So.. what i need to do?

字段: http://jsfiddle.net/Qf7Js/1/

推荐答案

选中此jsfiddle 以看看它是否满足您的要求.据我了解的问题，您希望在页面加载时自动打开包含当前链接的手风琴菜单. 这可以通过以下代码

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

只需将init_link值更改为当前URL.注意主机名部分，因为您的<a>可能不包含绝对URL.这可能有助于在网络浏览器中获取当前URL .

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.

要获取不带主机名部分的currnet URL，您可以可以(不是必须)使用以下代码

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+'/', '')

这篇关于将“活动"设置为“活动"单击后的手风琴菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！