Форум

gzhegow · #1 (**permalink**) 18.05.2011, 13:16

Не планировал особенно вникать в jquery, босс затребовал раскрывающееся меню.
Скопировал скрипт для UL LI DIV со SlideUp и SlideDown, все работало отлично - босс говорит не пойдет, можно было сделать в разы проще, а такую конструкцию слишком сложно обслуживать.

Потом он привел мне пример:

<a class="catalog" id="cat_link_1"><p>Корпусная мебель</p></a>
												<div class="box" id="cat_link_1">
													<a href="#">Пункт1</a>
													<a href="#">Пункт2</a>
													<a href="#">Пункт3</a>
													<a href="#">Пункт4</a>
												</div>
											<a class="catalog" id="cat_link_2"><p>Офисная мебель</p></a>
												<div class="box" id="cat_link_2">
													<a href="#">Пункт1</a>
													<a href="#">Пункт2</a>
													<a href="#">Пункт3</a>
													<a href="#">Пункт4</a>
												</div>

После этого были часы томительных поисков в Интернете не имея навыков написания JS кода... и вот что получилось.

$(document).ready (
	function () {
		$('#cat_div_'+divid).click (
			function() {
				if ($('#cat_link_'+divid).hasClass('active')) {
					$('#cat_link_'+divid).removeClass('active');
					$('#cat_link_'+divid).slideUp('medium');				
				} else {
					$('#cat_link_'+divid).addClass('active');
					$('#cat_link_'+divid).slideDown('medium');				
				}
			}
		);
	}
);

Однако очевидно, что где-то напортачил с разметкой или синтаксисом. А может кто-нибудь сможет подсказать вообще по-другому.

Задача: Мне необходимо сделать скрипт, который по нажатию на любую <a> с классом .catalog либо с маской по id :: "cat_div_" присваивало следующему диву с маской "cat_link_" и ТЕМ ЖЕ НОМЕРОМ - класс active.

Есть идеи?

Skipp · #2 (**permalink**) 18.05.2011, 13:19

посмотрите toggleClass

$(function(){
$(".catalog").click(function(){
$(this).next('div').eq(0).toggleClass('active','medium');
return false;
});
});

gzhegow · #3 (**permalink**) 18.05.2011, 13:34

весьма интересно, но "код сложный" это я про другое говорил, он не хотел чтобы в HTML использовалось UL LI и привел пример через A DIV. Сказал - покурить мануалы на тему выборки по маске.

Мол "сделай, чтобы при нажатии на любой элемент с маской cat_div_# (вместо решетки - номер), элементы cat_link_# (тот же номер) присваивался класс актив.

Эту конструкцию сейчас попробую.

Интересны пару моментов:
1. зачем нужно eq(0)?
2. я так понимаю, что переменную switch мы просто обозвали medium, и зачем-то вернули ее значение? вот только какая польза нам от булевского значения в переменной toggle?

Спасибо за помощь!

Skipp · #4 (**permalink**) 18.05.2011, 13:48

Вот пример:

<head>
<style>
	.active{
		font-size: 20px;
	}
	.medium{
		font-size: 10px;
	}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js">
</script>
<script type="text/javascript">
	$(function(){
		$(".catalog").click(function(){
			$("#cat_div_" + this.id.match(/^cat_link_(\d)+/)[1]).toggleClass('active','medium');
			return false;
		});
	});
</script>
</head>
<body>
<a id="cat_link_1" class="catalog">link 1</a>
<div id="cat_div_1">div 1</div>
<a id="cat_link_2" class="catalog">link 2</a>
<div id="cat_div_2">div 2</div>
<a id="cat_link_3" class="catalog">link 3</a>
<div id="cat_div_4">div 4</div>
<a id="cat_link_4" class="catalog">link 4</a>
<div id="cat_div_3">div 3</div>
</body>

gzhegow · #5 (**permalink**) 18.05.2011, 14:05

Невероятно! Работает!!

Думалка зашевелилась, добавил туда slideToggle и... о-жесть! когда жму на кнопку - изначально оно ЗАКРЫВАЕТСЯ(при первом нажатии), а потом уже открывает и закрывает как нужно.

Skipp · #6 (**permalink**) 18.05.2011, 14:14

ну это уже со стилями разбираться

gzhegow · #7 (**permalink**) 18.05.2011, 14:32

Ну вот так оно вроде как правильно должно работать но вообще ничего не делает. Хотя раньше именно по такой методике работало все:

$(document).ready (
	function () {
		$('.catalog').click (
			function() {
				if ($("#cat_div_" + this.id.match(/^cat_link_(\d)+/)[1]).hasClass('active')) {
					$("#cat_div_" + this.id.match(/^cat_link_(\d)+/)[1]).removeClass('active');
					$("#cat_div_" + this.id.match(/^cat_link_(\d)+/)[1]).slideUp('medium');
				} else {
					$("#cat_div_" + this.id.match(/^cat_link_(\d)+/)[1]).addClass('active');
					$("#cat_div_" + this.id.match(/^cat_link_(\d)+/)[1]).slideDown('medium');
				}
			}
		);
	}
);

Skipp · #8 (**permalink**) 19.05.2011, 09:36

попробуй поменять стили с помошью js

Форум

Справочник

Discord чат

Курсы javascript