Проблема с меню аккордеон
 

Добрый день!

Я делаю сайт на Modx.
Но проблема у меня как раз в меню, а именно с javascript кодом аккордеон меню.
Изначально я брала пример двохуровневого меню и пыталась переделать на трьохуровневый.
Но возникла проблема.
Само меню выглядит так - "problema-menu.jpg" (картинка во вложении).
При нажатии на элемент меню нижнего уровня - на "FAAC 740", например, мое меню сворачивается до верхнего уровня (картинка "problema-menu-1.jpg" во вложении).
Видимо что-то в коде не дописано. Но где и как, я не знаю.

Как мне сделать, чтобы при нажатии на третий уровень меню, само
меню оставалось открытым на нужном уровне.

Некоторые данные:
1) Для создания меню используется css документы и два js документа.
Один - jquery-1.5.2.min.js (подключен к сайту).
Второй - scriptbreaker-multiple-accordion-1.js (с ним и проблемы).
2) Вот код scriptbreaker-multiple-accordion-1.js:

/*
 * jQuery UI Multilevel Accordion v.1
 * 
 * Copyright (c) 2011 Pieter Pareit
 *
 * [url]http://www.scriptbreaker.com[/url]
 *
 */

//plugin definition
(function($){
    $.fn.extend({

    //pass the options variable to the function
    accordion: function(options) {
        
		var defaults = {
			accordion: 'true',
		/*	speed: 300,
			closedSign: '[+]',
			openedSign: '[-]'*/
		};

		// Extend our default options with those provided.
		var opts = $.extend(defaults, options);
		//Assign current element to variable, in this case is UL element
 		var $this = $(this);
 		
 		//add a mark [+] to a multilevel menu
 		$this.find("li").each(function() {
 			if($(this).find("ul").size() != 0){
 				//add the multilevel sign next to the link
 				$(this).find("a:first").append("<span>"+ opts.closedSign +"</span>");
 				
 				//avoid jumping to the top of the page when the href is an #
 				if($(this).find("a:first").attr('href') == "#"){
 		  			$(this).find("a:first").click(function(){return false;});
 		  		}
 			}
 		});

 		//open active level
 		$this.find("li.active").each(function() {
 			$(this).parents("ul");
 			$(this).parents("ul").parent("li").find("span:first").html(opts.closedSign);
 		});

  		$this.find("li a").click(function() {
  			if($(this).parent().find("ul").size() != 0){
  				if(opts.accordion){
  					//Do nothing when the list is open
  					if(!$(this).parent().find("ul").is(':visible')){
  						parents = $(this).parent().parents("ul");
  						visible = $this.find("ul:visible");
  						visible.each(function(visibleIndex){
  							var close = true;
  							parents.each(function(parentIndex){
  								if(parents[parentIndex] == visible[visibleIndex]){
  									close = false;
  									return false;
  								}
  							});
  							if(close){
  								if($(this).parent().find("ul") != visible[visibleIndex]){
  									$(visible[visibleIndex]).slideUp(opts.speed, function(){
  										$(this).parent("li").find("span:first").html(opts.openedSign);
  									});
  									
  								}
  							}
  						});
  					}
  				}
  				if($(this).parent().find("ul:first").is(":visible")){
  					$(this).parent().find("ul:first").slideUp(opts.speed, function(){
  						$(this).parent("li").find("span:first").delay(opts.speed).html(opts.closedSign);
  					});
  					
  					
  				}else{
  					$(this).parent().find("ul:first").slideDown(opts.speed, function(){
  						$(this).parent("li").find("span:first").delay(opts.speed).html(opts.openedSign);
  					});
  				}
  			}
  		});
    }
});
})(jQuery);

3) Сейчас сайт на локалке.


Прошу помочь новичку.
Очень нужно срочно решить эту проблему.:help:


P.S. Ответа на форуме я не нашла. Если есть ответ прошу переадресовать.

Спасибо.

masaniachko,
строка 48
попробуйте так

$this.find("li a").click(function(event) {event.preventDefault();

заменила строку на вашу.

Ничего не получилось!!!

Дохожу я до последнего уровня, нажимаю на ссылку, а страница по этой ссылке не открывается.
То есть ссылка стала не активной.

Возможно есть еще какие-то варианты?

masaniachko,
видеть надо в живую

Сайт пока на локальном компьютере.
Попробую на выходных скинуть на бесплатный хостинг.

Спасибо за вариант.

Если я правильно поняла, то этот пример для сайта на html/php.

Но у меня сайт на Modx и этот вариант мне не совсем подходит.:)


То есть я имею ввиду, что хотелось бы разобраться именно с тем java скриптом?

:)

А у меня этот же плагин не работает с jQuery 3.2.1
в консоли ошибка:

Uncaught TypeError: $(...).find(...).size is not a function
    at HTMLLIElement.<anonymous> (accordion.js:29)
    at Function.each (jquery-3.2.1.min.js:2)
    at r.fn.init.each (jquery-3.2.1.min.js:2)
    at r.fn.init.accordion (accordion.js:28)
    at HTMLDocument.<anonymous> ((index):524)
    at j (jquery-3.2.1.min.js:2)
    at k (jquery-3.2.1.min.js:2)
(anonymous)	@	accordion.js:29
each		@	jquery-3.2.1.min.js:2
each		@	jquery-3.2.1.min.js:2
accordion	@	accordion.js:28
(anonymous)	@	(index):524
j			@	jquery-3.2.1.min.js:2
k			@	jquery-3.2.1.min.js:2
setTimeout (async)		
r.readyException	@	jquery-3.2.1.min.js:2
(anonymous)			@	jquery-3.2.1.min.js:2
j					@	jquery-3.2.1.min.js:2
k					@	jquery-3.2.1.min.js:2
setTimeout (async)		
(anonymous)			@	jquery-3.2.1.min.js:2
i					@	jquery-3.2.1.min.js:2
fireWith			@	jquery-3.2.1.min.js:2
fire				@	jquery-3.2.1.min.js:2
i					@	jquery-3.2.1.min.js:2
fireWith			@	jquery-3.2.1.min.js:2
k					@	jquery-3.2.1.min.js:2
setTimeout (async)		
(anonymous)			@	jquery-3.2.1.min.js:2
i					@	jquery-3.2.1.min.js:2
fireWith			@	jquery-3.2.1.min.js:2
fire				@	jquery-3.2.1.min.js:2
i					@	jquery-3.2.1.min.js:2
fireWith			@	jquery-3.2.1.min.js:2
ready				@	jquery-3.2.1.min.js:2
S					@	jquery-3.2.1.min.js:3

А с jQuery 1.12.0, например вполне работает
Подскажите как поправить чтобы работал с jQuery 3.2.1?

Благодарю