1

私はこれに何時間も取り組んで検索してきましたが、私のアプローチはうまくいきません。

これは私の状況です：

フィドル

2 つの「submenu-ebene1」のいずれかをクリックすると、それらが切り替わります。しかし、他のものをクリックすると、現在開いているものを再び閉じたいと思います。内部のリンク 1 とリンク 2 の同じ動作。

私がする必要があるのは、サブメニュー-ebene1 liの兄弟を検索して、現在クラス「.active」とslideToggleを持つものを検索することだけです。マークアップが異なるため、submenu-ebene2 についてもほぼ同じです。

私はこのようにそれをやろうとしました:

//toggle submenu-ebene1
$("submenu-ebene1").on("click", function() {
    $(this).siblings(".active").slideToggle();
});

//toggle submenu-ebene2
$("submenu-ebene2 li").on("click", function() {
    $(this).siblings(".active-ebene2").slideToggle();
});

私は解決策ではなく、最初にいくつかのヒントを得たいと思っています.

4

1 に答える 1

1

この http://jsfiddle.net/SyYzY/ または http://jsfiddle.net/aN5ey/のように

それがあなたのニーズに合うことを願っています:)

コード

//apply active-classes to submenu-ebene1
$(".link").click(function () {
    $(".submenu-ebene2").slideUp();
    $(".active").toggleClass("inactive active");
    $(this).addClass("active").removeClass("inactive");
});

//apply active-classes to submenu-ebene2
$(".submenu-ebene2 > li.inactive-ebene2").click(function (e) {
    $(".active-ebene2").toggleClass("inactive-ebene2 active-ebene2");
    $(this).addClass("active-ebene2").removeClass("inactive-ebene2");
});

// submenu-ebene1 toggle
$(".submenu li").click(function (e) {
    $(this).next("li").children(".submenu-ebene2").slideToggle();
});

// submenu-ebene2 toggle
$(".submenu-ebene2 li").click(function () {
    $(this).next("li").children(".submenu-ebene3").slideToggle();
});




//toggle submenu-ebene1
$("submenu-ebene1").on("click", function () {
    $(this).siblings(".active").slideToggle();
});

//toggle submenu-ebene2
$("submenu-ebene2 li").on("click", function () {
    $(this).siblings(".active-ebene2").slideToggle();
});
于 2013-11-08T23:36:57.633 に答える