Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.11.2013, 22:18
Аспирант
Отправить личное сообщение для Galyanov Посмотреть профиль Найти все сообщения от Galyanov
 
Регистрация: 23.01.2011
Сообщений: 47

Отображение при клике + закрытие предыдущего
Здравствуйте.
Использую вот такой скрипт для отображения скрытого блока при клике на ссылку.
Как можно модифицировать скрипт, чтобы можно было раскрывать два блока по очередности, т.е. для каждого блока своя ссылка. И при открытии второго блока, предыдущий чтобы закрывался?

<script>
		$(function() {
			$(".show-block1").click(function() {
				$("#hide-block1").slideToggle("slow");
				$(this).toggleClass("active"); return false;
			});
		});
</script>




<a class="show-block1" href="/">show block1</a>

<div id="hide-block1" style="display:none;">	
	Содержимое блока 1
</div>
Ответить с цитированием
  #2 (permalink)  
Старый 12.11.2013, 22:29
Аватар для mi.rafaylik
Кандидат Javascript-наук
Отправить личное сообщение для mi.rafaylik Посмотреть профиль Найти все сообщения от mi.rafaylik
 
Регистрация: 07.12.2012
Сообщений: 113

Если структура постоянная (контроллер > блок, контроллер > блок, контр...),
тогда можно так: http://learn.javascript.ru/play/WQm9

В любом случае принцип такой:
1. Блокам добавить общий класс, по которому будем их скрывать.
2. При нажатии на любой контроллер скрываем все блоки по классу, кроме того который нужно отобразить.
3. Отображаем интересующий нас блок.

Последний раз редактировалось mi.rafaylik, 13.11.2013 в 09:01.
Ответить с цитированием
  #3 (permalink)  
Старый 12.11.2013, 23:40
Аспирант
Отправить личное сообщение для Galyanov Посмотреть профиль Найти все сообщения от Galyanov
 
Регистрация: 23.01.2011
Сообщений: 47

Сообщение от mi.rafaylik Посмотреть сообщение
Если структура постоянная (контроллер > блок, контроллер > блок, контр...),
тогда можно так: http://jsfiddle.net/rafaylik/7SM43/

В любом случае принцип такой:
1. Блокам добавить общий класс, по которому будем их скрывать.
2. При нажатии на любой контроллер скрываем все блоки по классу, кроме того который нужно отобразить.
3. Отображаем интересующий нас блок.
Спасибо.
А как сделать, если эти две ссылки у меня идут первыми в списке, а открывающиеся блоки внизу.
Я поставил две ссылки рядом, блоки сместил вниз также рядом, и теперь открывается только один блок, а второй нет.
Ответить с цитированием
  #4 (permalink)  
Старый 13.11.2013, 06:45
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,879

Сообщение от Galyanov
А как сделать
Пора тебе показать пример твоего хтмля...
Ответить с цитированием
  #5 (permalink)  
Старый 13.11.2013, 08:35
Аватар для mi.rafaylik
Кандидат Javascript-наук
Отправить личное сообщение для mi.rafaylik Посмотреть профиль Найти все сообщения от mi.rafaylik
 
Регистрация: 07.12.2012
Сообщений: 113

Сообщение от Galyanov
если эти две ссылки у меня идут первыми в списке, а открывающиеся блоки внизу
Тогда привязывать контроллеры к своим блокам.
Посмотреть
<a id="showDiv1">show div 1</a>
<a id="showDiv2">show div 2</a>

<div id="div1">div1</div>
<div id="div2">div2</div>
$('#showDiv1').click(function(){
	$('#div1').stop(true, true).slideDown('slow');
	$('#div2').slideUp('slow');
});
$('#showDiv2').click(function(){
	$('#div2').stop(true, true).slideDown('slow');
	$('#div1').slideUp('slow');
});

Последний раз редактировалось mi.rafaylik, 13.11.2013 в 10:46.
Ответить с цитированием
  #6 (permalink)  
Старый 13.11.2013, 16:18
Аспирант
Отправить личное сообщение для Galyanov Посмотреть профиль Найти все сообщения от Galyanov
 
Регистрация: 23.01.2011
Сообщений: 47

Огромное спасибо, что помогаете)
В примере все работает как надо, а вот вставил в свой хтмл, и блок начинает раскрывается и тут же обратно скрывается.

Что может быть не так?
Привести свой хтмл в пример?
Ответить с цитированием
  #7 (permalink)  
Старый 13.11.2013, 16:24
Аспирант
Отправить личное сообщение для Galyanov Посмотреть профиль Найти все сообщения от Galyanov
 
Регистрация: 23.01.2011
Сообщений: 47

А нет, примите извинения, все работает. В линк ссылки не то прописал.
Огромное человеческое спасибо Вам! С меня плюсик как минимум
Ответить с цитированием
  #8 (permalink)  
Старый 13.11.2013, 17:33
Аспирант
Отправить личное сообщение для Galyanov Посмотреть профиль Найти все сообщения от Galyanov
 
Регистрация: 23.01.2011
Сообщений: 47

Сообщение от mi.rafaylik Посмотреть сообщение
Тогда привязывать контроллеры к своим блокам.
Посмотреть
<a id="showDiv1">show div 1</a>
<a id="showDiv2">show div 2</a>

<div id="div1">div1</div>
<div id="div2">div2</div>
$('#showDiv1').click(function(){
	$('#div1').stop(true, true).slideDown('slow');
	$('#div2').slideUp('slow');
});
$('#showDiv2').click(function(){
	$('#div2').stop(true, true).slideDown('slow');
	$('#div1').slideUp('slow');
});
Не сочтите за наглость, но если бы Вы подсказали как сделать, чтобы при повторном клике на ссылку блок обратно бы закрывался, как это в моем изначальном примере, то это был бы вообще комбо-мега-супер ответ
Ответить с цитированием
  #9 (permalink)  
Старый 13.11.2013, 18:01
Аватар для mi.rafaylik
Кандидат Javascript-наук
Отправить личное сообщение для mi.rafaylik Посмотреть профиль Найти все сообщения от mi.rafaylik
 
Регистрация: 07.12.2012
Сообщений: 113

slideDown заменить на slideToggle.
Посмотреть
<a id="showDiv1">show div 1</a>
<a id="showDiv2">show div 2</a>

<div id="div1">div1</div>
<div id="div2">div2</div>
$('#showDiv1').click(function(){
	$('#div1').stop(true, true).slideToggle('slow');
	$('#div2').slideUp('slow');
});
$('#showDiv2').click(function(){
	$('#div2').stop(true, true).slideToggle('slow');
	$('#div1').slideUp('slow');
});

Последний раз редактировалось mi.rafaylik, 14.11.2013 в 09:18.
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смена фона картинки при клике на иконку Letto Элементы интерфейса 2 08.11.2013 16:31
При клике менять значение в ячейке таблицы edmundantes Events/DOM/Window 8 27.04.2012 16:26
Удаление класса при клике на объект lukingnu jQuery 3 23.04.2012 11:14
Скролл вверх при клике ie6/7/8 dr_gluk jQuery 0 21.03.2012 09:12
Событие при клике на любой элемент кроме одного shaltay jQuery 1 29.11.2011 17:27