Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.07.2014, 12:05
Новичок на форуме
Отправить личное сообщение для masaniachko Посмотреть профиль Найти все сообщения от masaniachko
 
Регистрация: 10.01.2013
Сообщений: 7

Проблема с меню аккордеон
Добрый день!

Я делаю сайт на 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) Сейчас сайт на локалке.


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


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

Спасибо.
Изображения:
Тип файла: jpg problema-menu.jpg (16.2 Кб, 11 просмотров)
Тип файла: jpg problema-menu-2.jpg (75.2 Кб, 7 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 21.07.2014, 12:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

masaniachko,
строка 48
попробуйте так
$this.find("li a").click(function(event) {event.preventDefault();
Ответить с цитированием
  #3 (permalink)  
Старый 25.07.2014, 10:45
Новичок на форуме
Отправить личное сообщение для masaniachko Посмотреть профиль Найти все сообщения от masaniachko
 
Регистрация: 10.01.2013
Сообщений: 7

Сообщение от рони Посмотреть сообщение
masaniachko,
строка 48
попробуйте так
$this.find("li a").click(function(event) {event.preventDefault();
заменила строку на вашу.

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

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

Возможно есть еще какие-то варианты?
Ответить с цитированием
  #4 (permalink)  
Старый 25.07.2014, 11:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

masaniachko,
видеть надо в живую
Ответить с цитированием
  #5 (permalink)  
Старый 25.07.2014, 12:23
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

masaniachko,
<head>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="scriptbreaker-multiple-accordion-1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$(".topnav").accordion({
		accordion: true,
		speed: 500,
		closedSign: '[+]',
		openedSign: '[-]'
	});
});
</script>
</head>
<body>
<ul class="topnav">
	<li><a href="#">Уровень 1</a>
		<ul>
			 <li><a href="#">Уровень 2</a></li>
			 <li><a href="#">Уровень 2</a>
				<ul>
					<li><a href="#">Уровень 3</a></li>
					<li><a href="#">Уровень 3</a></li>
				</ul>
			</li>
			 <li><a href="#">Уровень 2</a></li>
		</ul>
	</li>
	<li><a href="#">Уровень 1</a>
		<ul>
			 <li><a href="#">Уровень 2</a></li>
			 <li><a href="#">Уровень 2</a>
				<ul>
					<li><a href="#">Уровень 3</a></li>
					<li><a href="#">Уровень 3</a></li>
				</ul>
			</li>
			 <li><a href="#">Уровень 2</a></li>
		</ul>
	</li>
</ul>
</body>

Последний раз редактировалось Rise, 25.07.2014 в 12:25.
Ответить с цитированием
  #6 (permalink)  
Старый 25.07.2014, 13:33
Новичок на форуме
Отправить личное сообщение для masaniachko Посмотреть профиль Найти все сообщения от masaniachko
 
Регистрация: 10.01.2013
Сообщений: 7

Сообщение от рони Посмотреть сообщение
masaniachko,
видеть надо в живую
Сайт пока на локальном компьютере.
Попробую на выходных скинуть на бесплатный хостинг.
Ответить с цитированием
  #7 (permalink)  
Старый 25.07.2014, 13:49
Новичок на форуме
Отправить личное сообщение для masaniachko Посмотреть профиль Найти все сообщения от masaniachko
 
Регистрация: 10.01.2013
Сообщений: 7

Сообщение от Rise Посмотреть сообщение
masaniachko,
<head>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="scriptbreaker-multiple-accordion-1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$(".topnav").accordion({
		accordion: true,
		speed: 500,
		closedSign: '[+]',
		openedSign: '[-]'
	});
});
</script>
</head>
<body>
<ul class="topnav">
	<li><a href="#">Уровень 1</a>
		<ul>
			 <li><a href="#">Уровень 2</a></li>
			 <li><a href="#">Уровень 2</a>
				<ul>
					<li><a href="#">Уровень 3</a></li>
					<li><a href="#">Уровень 3</a></li>
				</ul>
			</li>
			 <li><a href="#">Уровень 2</a></li>
		</ul>
	</li>
	<li><a href="#">Уровень 1</a>
		<ul>
			 <li><a href="#">Уровень 2</a></li>
			 <li><a href="#">Уровень 2</a>
				<ul>
					<li><a href="#">Уровень 3</a></li>
					<li><a href="#">Уровень 3</a></li>
				</ul>
			</li>
			 <li><a href="#">Уровень 2</a></li>
		</ul>
	</li>
</ul>
</body>
Спасибо за вариант.

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

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


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

Последний раз редактировалось masaniachko, 28.07.2014 в 12:02.
Ответить с цитированием
  #8 (permalink)  
Старый 25.07.2014, 14:41
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Ответить с цитированием
  #9 (permalink)  
Старый 17.06.2018, 14:07
Кандидат Javascript-наук
Отправить личное сообщение для dpts Посмотреть профиль Найти все сообщения от dpts
 
Регистрация: 12.05.2015
Сообщений: 111

А у меня этот же плагин не работает с 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?
Ответить с цитированием
  #10 (permalink)  
Старый 17.06.2018, 14:12
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

https://github.com/jquery/jquery-migrate
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вертикальное меню - аккордеон. Проблема. notgosu Events/DOM/Window 5 23.01.2013 11:47
меню в стиле аккордеон из таблицы chdn Элементы интерфейса 1 10.11.2011 21:15
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36
Программа Sothink DHTML. Проблема с выпадающем меню в Opere и Мозила. wertor Javascript под браузер 1 27.01.2010 17:19
Проблема с меню для кнопки в Гриде progi2007 ExtJS 0 03.08.2009 14:16