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

私は明確ですか？

だから..私は何をする必要がありますか？

フィドル: 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 に答える