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>

我也在尝试，请使用此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.asp上的“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值更改为当前网址即可。请注意主机名部分，因为<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>

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

单击后设置“活动”折叠式菜单

2 个答案: