Javascript.RU

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

Показать/скрыть блок
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Collapsible Message Panels</title>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>

<style type="text/css">
.next {
display:block;
position: relative;

}
.panel {
position:absolute;
z-index:2;
display: none;
}
.bloc
{
width:50%;
z-index:1;
}
.active {
display:block;
height:20px;
border-top:1px solid #93cce9;
font-size:12px;
color:#c8e9f9;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$(".next").click(function () {
$(this).next(".panel").slideToggle("slow")
$(this).toggleClass("active")
return false;
});
});
</script>

</head>
<body>

<div class="bloc">
<h1>Блок</h1>
<span> Блок</span>
<span class="next">
<a href="#">Показать</a>
<a href="#" >Скрыть</a>
</span>

<div class="panel">
<h3>Sample heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. </p>

</div>
</div>
<div class="bloc">
<h1>Блок 1</h1>
<span> Блок 1</span>
<span class="next">
<a href="#" >Показать</a>
<a href="#" >Скрыть</a>
</span>
<div class="panel">
<h3>Sample heading</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. </p>
</div>
</div>

</body>
</html>


Проблема заключается в том, что надо менять слова Показать (когда блок panel скрыт) и при разворачивании блока показать слово Свернуть. Для одного блока это не проблема, прописав $("a").toggle(), но ведь на странице есть еще ссылки - и они рушатся. Надо через наследование менять слова только для того блока, где идет разворачивание panel. Подскажите как это прописать правильно???
Ответить с цитированием
  #2 (permalink)  
Старый 23.09.2010, 12:57
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

Разметка:

<div class='blockheader'>
	<a href='javascript://' class='toggler'>
		Скрыть
	</a>
</div>
<div class='blockcontent'>
	Содержимое…
</div>


jQuery:

$( "a.toggler" ).click(function () {
	var block = $( this ).parent().next();
	block.slideToggle();
	this.innerHTML = [ "Скрыть", "Показать" ][ +block.is( ":hidden" ) ];
});
Ответить с цитированием
  #3 (permalink)  
Старый 23.09.2010, 13:25
Новичок на форуме
Отправить личное сообщение для Lelja_05 Посмотреть профиль Найти все сообщения от Lelja_05
 
Регистрация: 23.09.2010
Сообщений: 7

Да, блоки раскрываются, но текст так и остается CКРЫТЬ. Где то я еще допустила ошибку?
Ответить с цитированием
  #4 (permalink)  
Старый 23.09.2010, 13:39
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

Как только что выяснилось, slideToggle оставляет элементу высоту 1px и проверка на видимость элемента всегда равна true.

Можно записывать клик в свойство элемента и по нему проверять:

$( "a.toggler" ).click(function () {
	this.clicked = !this.clicked;
	$( this ).parent().next().slideToggle();
	this.innerHTML = [ "Скрыть", "Показать" ][ +this.clicked ];
});
Ответить с цитированием
  #5 (permalink)  
Старый 23.09.2010, 13:56
Новичок на форуме
Отправить личное сообщение для Lelja_05 Посмотреть профиль Найти все сообщения от Lelja_05
 
Регистрация: 23.09.2010
Сообщений: 7

Спасибо Вам огромное, все заработало ) буду знать)))
Ответить с цитированием
  #6 (permalink)  
Старый 23.09.2010, 16:08
Новичок на форуме
Отправить личное сообщение для Lelja_05 Посмотреть профиль Найти все сообщения от Lelja_05
 
Регистрация: 23.09.2010
Сообщений: 7

И следующая задача тут же нарисовалась... Необходимо перед открытием панели проверить закрыты ли другие панели, и если они открыты, свернуть их все, и только потом развернуть нужную.
Ответить с цитированием
  #7 (permalink)  
Старый 23.09.2010, 16:21
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

Можно сначала закрывать все панели, а потом открывать нужную. Тогда ничего не надо будет проверять.
Ответить с цитированием
  #8 (permalink)  
Старый 27.09.2010, 15:27
Новичок на форуме
Отправить личное сообщение для Lelja_05 Посмотреть профиль Найти все сообщения от Lelja_05
 
Регистрация: 23.09.2010
Сообщений: 7

Мда, панели то я скрываю, все бы хорошо...но...ссылки Показать/свернуть тогда некорректно работают, к ним тоже надо обработку поставить???
Ответить с цитированием
  #9 (permalink)  
Старый 27.09.2010, 16:35
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

Можно кликать по самим ссылкам.
Ответить с цитированием
  #10 (permalink)  
Старый 01.07.2013, 19:28
Аспирант
Отправить личное сообщение для jekjuk Посмотреть профиль Найти все сообщения от jekjuk
 
Регистрация: 25.08.2009
Сообщений: 39

у меня несколько блоков на странице, я могу использовать только классы;
вопрос - как сделать так, что бы открывался один? (что ниже порядком)

/код сейчас/
$(document).ready(function(){
    $(".subOpen").click(function () {
      $("div.sub").toggle(); 
    });
});
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Блок с сообщением - Javascript или jQuery qwermjk Общие вопросы Javascript 3 12.07.2010 09:48
Фиксированный блок kakarotto Элементы интерфейса 2 09.07.2010 00:20
Всплываюший блок! daron jQuery 5 14.05.2010 11:20
Выпадающий блок и выбор в нем позиции tuzhilkin Общие вопросы Javascript 0 10.11.2009 16:05
Неподвижный блок snapik (X)HTML/CSS 4 23.03.2008 00:52