JQ Drop Down menu zamykanie z tym samym znakiem


(Kernelus) #1

Witam,

posiadam drop down menu, które już kiedyś tu wstawiałem i już w końcu prawie się z nim uporałem lecz w sumie została jedna rzecz. Miałem przy nim "+" i "-" kiedy dana częśc drzewka byłą otwarta lub zamknięte, lecz teraz chciałem ustawić dla obu tych sytuacji jeden znak ">" I napotkałem następujący problem. Kiedy mam otwartą jedną rzecz i otwieram drugą to ta pierwsza się nie zamyka. Jest to spowodowane substringiem bo nie ma rozróżnienia na znaki(tak mi sie wydaje) lecz nie potrafię tego przerobić. Oto kod .js

$(function() {

	// hide all the sub-menus

	$("span.toggle").next().hide();

    $(".current").parents("li ul").show();



	// add a link nudging animation effect to each link

    $("#jQ-menu a, #jQ-menu span.toggle").hover(function() {

        $(this).stop().animate( {

			//paddingLeft:"10px",

			color:getElementById("#jQ-menu a, #jQ-menu span.toggle").color

        }, 300);

    }, function() {

        $(this).stop().animate( {

			paddingLeft:"0",

			color:getElementById("#jQ-menu a, #jQ-menu span.toggle").color,

        }, 300);

    });

	$("#jQ-menu li.current a").hover(function() {

        $(this).stop().animate( {

			//paddingLeft:"10px",

			color:getElementById("#jQ-menu li.current a").color

        }, 300);

    }, function() {

        $(this).stop().animate( {

			paddingLeft:"0",

			color:getElementById("#jQ-menu li.current a").color,

        }, 300);

    });

	$("#jQ-menu span.toggle a.current").hover(function() {

        $(this).stop().animate( {

			//paddingLeft:"10px",

			color:getElementById("#jQ-menu span.toggle a.current").color

        }, 300);

    }, function() {

        $(this).stop().animate( {

			paddingLeft:"0",

			color:getElementById("#jQ-menu span.toggle a.current").color,

        }, 300);

    });



	// set the cursor of the toggling span elements

	$("span.toggle").css("cursor", "pointer");


	// prepend a plus sign to signify that the sub-menus aren't expanded

    $('span.toggle').each(function(){

      if($(this).next().find(".current").html() != null){

        $(this).prepend("> ");

      }else{

         $(this).prepend("> ");

      };

                });

   	// add a click function that toggles the sub-menu when the corresponding

	// span element is clicked

  $("span.toggle").click(function() {


        $(this).next().toggle(1000);

            // switch the plus to a minus sign or vice-versa

            var v = $(this).html().substring( 0, 1 );

			if ( v == ">" ){

                $(this).html( ">" + $(this).html().substring( 1 ) );

                var li = $(this).parent().siblings('li');

                $('span.toggle', li).each(function(){

					var v = $(this).html().substring( 0, 1 );

					if ( v == ">" ){

                    $(this).html( ">" + $(this).html().substring( 1 ) );

                    $(this).next().toggle(1000);

					}

                });

            } else if ( v == ">" )

                $(this).html( ">" + $(this).html().substring( 1 ) );

    });

});

w razie czego podsyłam jeszcze jsbin: http://jsbin.com/ewigon/1/edit


(hoobert) #2

spróbuj dla zdarzenia click przypisać coś takiego

$("span.toggle").click(function() {

    $(this).addClass('expanded');

    $(this).next().toggle(1000);


    $(this).parent().parent().find('.expanded').not(this).each(function(){

       $(this).next().toggle(1000);

     });

});

(Kernelus) #3

Hmmm trochę się miesza.

Spójrz http://jsbin.com/ewigon/5/edit

Kliknij najpierw np. “Zabiegi instytutowe” potem “Oczyszczanie skóry” a następnie “Masaże twarzy i dekoltu” Wtedy się coś miesza, podobnie dla niższych poziomów.

Edit:

Tu się mogę mylić ale to mi troszeczkę wygląda jakby coś się nadpisywało, bo im dalej klikam to tak jakby na przemian się otwierały zamykały i coraz więcej ich. Tak mi się wydaje. :stuck_out_tongue:

Edit2:

Za pomocą firebuga dobrze widać co się dzieje.


(hoobert) #4

Może coś takiego?

http://jsbin.com/ewigon/10/edit


(Kernelus) #5

Hmmm działa niemalże idealnie, ale jak mam current na ostatnim elemencie rozwijanym np. Zabiegi instytutowe>Living Dimension>Live Moist Treatment(to jest current) to wtedy nie działa.


(hoobert) #6

A co konkretnie nie działa? ‘Live most treatment’ jest odnośnikiem do ‘livemosttreatment.html’ i nie działa dlatego, bo na tym serwerze nie ma takiego pliku i wyświetla się komunikat ‘This page ain’t here :(’. Chyba, że masz coś innego na myśli.


(Kernelus) #7

Źle napisałem :slight_smile: Chodzi o to, że jak ustawię klasę “current” (czyli że ma być roziwnięte na tym elemencie) na ‘Live Moist Treatment’ To wtedy jest rozwinięte wszystko ok, rozwinięte są zabiegi instytutowe, Living Dimension i jest (w css ustawiłem) inny kolor currenta który jest na "Live moist treatment’ I teraz kiedy próbuję rozwinąć “Oczyszczanie skróty” to Zabiegi instytutowe się nie zwijają. Oto jsbin: http://jsbin.com/ewigon/11/edit


(hoobert) #8

Bo w tych spanach, które są nagłówkami tych elementów będących stopniowo wyżej w hierarchii od elementu z klasą ‘current’ trzeba przypisać klasę ‘expanded’. Do kodu javascript można dopisać coś takiego:

init: function(){

...

  var current = $('.current');

  for(var i=0;;i++)

  {

    if(current.parent().parent().parent().is('#jQ-menu'))

      break;


    current = current.parent().parent().parent().children(':first');      

    current.addClass('expanded');

  }

}

Zobacz na:

http://jsbin.com/ewigon/12/edit


(Kernelus) #9

Dzięki wielkie, teraz działa idealnie. :slight_smile: Jesteś wielki, w końcu mam to menu. :slight_smile: Jeszcze raz dzięki!

Edit:

Tylko jest teraz problem, ze jak nie mam w ogóle current to mi wyskakuje bład. :expressionless:


(hoobert) #10

hm, nie testowałem ale spróbuj przed tą pętlą for zrobić taki warunek:

var current = $('.current');


if(typeof current !== 'undefined')

{

  for(var i=0;;i++)

  {

    if(current.parent().parent().parent().is('#jQ-menu'))

      break;


    current = current.parent().parent().parent().children(':first');     

    current.addClass('expanded');

  }

}

(Kernelus) #11

Hmm też się wiesz. Też zauważyłęm, że jak dam “current” na Pięlęgnacje Twarzy albo na Zabiegi instytutowe to nie wywala mi błędu, ale nie rozwija się drzewko. Kurcze ten drop down menu to jest naprawdę zawiły problem. :smiley:


(hoobert) #12

Klasę ‘current’ dodajesz do elementu listy:

...

Tutaj wydaje mi się, że działa tak jak powinno:

http://jsbin.com/ewigon/19/edit


(Kernelus) #13

Już niemalże idealnie, działa jak nie ma żadnego current ale jak dam na główny element np. “Pielęgnacja twarzy” to się wiesza. :slight_smile:


(hoobert) #14

warunek

if(current.parent().parent().parent().is('#jQ-menu'))

zamień na:

if(current.parent().parent().parent().is('#jQ-menu') || current.parent().parent().is('#jQ-menu'))

i powinno śmigać.


(Kernelus) #15

Ok teraz działa. :slight_smile: Tylko takie małe pytanie, jak mam już current na “Pielęgnacja Twarzy” i klikam na drugi główny element “Pielęgnacja Ciała” to pielęgnacja twarzy się nie chowa bo nie mam w pielęgnacja ciała niczego? Tzn. nie mam żadnych submenu? Czy po prostu drzewko nie jest przystosowane?:slight_smile: