1

私はアコーディオンメニューを持っています：

<ul id="menu">
    <li>
        <a href="#" class="highmenu">Menu1</a>
        <ul class="sub">
            <li class="submenulink">Menu1Link1</li>
            <li class="submenulink">Menu1Link2</li>
        </ul>
    </li>
    <li>
        <a href="#" class="highmenu">Menu2</a>
        <ul class="sub">
            <li class="submenulink">Menu2Link1</li>
            <li class="submenulink">Menu2Link2</li>
        </ul>
    </li>
</ul>

そして、これが私が使用しているjQueryスクリプトです：

$(document).ready(function() {
    var pathname = window.location.pathname;
    $("#menu ul").hide();
    $("#menu a[href='" + pathname + "']").parents(".sub").show();
    $("#menu li a").click(function() {
        var checkElement = $(this).next();
        if ((checkElement.is("ul")) && (checkElement.is(":visible"))) {
            return false;
        }
        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $("#menu ul:visible").slideUp("normal");
            checkElement.slideDown("normal");
            return false;
        }
    });
});

私が欲しいのは、特定のサブが開いているときは、対応するハイメニューがhighmenu activeクラスに設定され、サブが非表示になっているときは、アクティブなクラスが削除されることです。

どんな助けでも大歓迎です、ありがとう！

4

1 に答える 1

0

これはどう。リンクをクリックするたびに、すべてのリンクからすべてのアクティブなクラスを削除し、適切なものにのみ適用します。

var pathname = window.location.pathname;
$("#menu ul").hide();
$("#menu a[href='" + pathname + "']").parents(".sub").show();
$("#menu li a").click(function() {

    $("#menu li a").removeClass("active");
    $(this).addClass("active");

    var checkElement = $(this).next();
    if ((checkElement.is("ul")) && (checkElement.is(":visible"))) {
        return false;
    }
    if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $("#menu ul:visible").slideUp("normal");
        checkElement.slideDown("normal");
        return false;
    }
});​

ここでフィドルを操作する：http：//jsfiddle.net/jKGNA/

于 2012-06-07T12:15:33.480 に答える