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 ) );
});
});
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.
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.
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.
Źle napisałem 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
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');
}
}
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');
}
}
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.
Ok teraz działa. 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?