0

单击链接并更改页面后，我正在尝试将手风琴菜单设置为“活动”...

<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但不起作用...

我尝试的（但不工作）：

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

如果用户点击“EMPRESA”，在页面empresa.asp上QUEM SOMOS需要打开菜单。而如果用户点击菜单下的一些分类PRODUTOS，在页面produtos_caegoria.asp上PRODUTOS需要打开..

我很清楚？

所以..我需要做什么？

小提琴：http : //jsfiddle.net/Qf7Js/1/

4

2 回答 2

1

检查这个 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。这可能有助于在 Web 浏览器中获取当前 URL。

要获取没有主机名部分的当前 URL，您可以（不是必须）使用以下代码 

var init_link = window.location.href.replace(window.location.protocol+'//'+window.location.hostname+'/', '')
于 2013-05-01T20:12:09.660 回答
0

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>

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

于 2013-05-01T20:00:36.327 回答