CODEWITHSUNDEEP
jquerynestedhtml-listsslidetoggle
sqe
sqe

Reputation: 1716

jQuery slideToggle nested ul

FIDDLE

I recently changed my markup and since then my jQuery toggle function isn't working anymore. I tried to handle this but I got a few requirements I just don't know how to solve.

Here is what I want to achieve:

  1. clicking on Link 1 or 2 slideToggles its ul (with Sublink 1 etc)

  2. clicking on Sublink 1 or 2 slideToggle its ul (with Snippet 1 etc.)

  3. clicking on any closed element, it should CLOSE any other open element. Means when Link 2 is open and I click on Link 1, Link 2 should close. When Sublink 2 is open and I click on Sublink 1, Sublink 2 should close. And important: when Sublink 1 under Link 1 is open, I click on Link 2 and then again on Link 1, Sublink 1 should be closed and not still left open

  4. clicking twice on the same element shouldn't toggle in and out at the same time

  5. it should be possible to have e.g. Link x, Sublink x AND Snippet x with the class "active", so that one knows where exactly he is (active = other backgroundcolor). So my toggleClass isn't that correct..

In order to be able to change the appearance of the list elements, you have to change the display mode from none to block

$("#sidebar-left .submenu-ebene2").css('display', 'block');
$("#sidebar-left .submenu-ebene3").css('display', 'none');

Any help is appreciated. Thank you for taking your time!

Here is the jQuery:

$("#sidebar-left .submenu-ebene2").css('display', 'none');
  $("#sidebar-left .submenu-ebene3").css('display', 'none');
    $("ul > li.closed").click(function (e) {
      if (e.target === this) {
          $(this).siblings("li.open").find(" > ul").slideToggle('fast', function () {
              $(this).parents("li.open:first").toggleClass("open closed");
          });

          $(this).toggleClass("closed open").find(" > ul").slideToggle('fast');
      }
});

$(".link").click(function(e) {
    $(".active").toggleClass("inactive active");
    $(this).addClass("active").removeClass("inactive");
});

FIDDLE

Upvotes: 0

Views: 1874

Answers (1)

David Aguirre
David Aguirre

Reputation: 1410

Try This :

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

$(".link").click(function(e) {
    $(".active").toggleClass("inactive active");
    $(this).addClass("active").removeClass("inactive");
});

Also, hide .submenu-ebene2 with css

.submenu-ebene2 {
    display: none;
}
.submenu-ebene3 {
 display: none;   
}

http://jsfiddle.net/defmetalhead/pLv77/2/

Upvotes: 1

Related Questions