Javascript.RU

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

Раздвигающийся текст. Нужна помощь!
Надо чтобы раскрывающийся текст мог раскрываться с нескольких ссылок к примеру из стандартного меню и с обычной ссылки.
Лучше чтобы в меню вызов открытия текста находился в параметре href.
+
Когда открывается одна форма, вторая сворачивается.

Прошу помогите!!

Нигде не смог найти такого решения.


<!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>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
 
</head>
 
<body>
 
Меню:
<ul>
<li><a href="#" class="heading">Button</a></li>
<li><a href="#" class="heading1">Button2</a></li>
</ul>
 
Текст:
 
  <a href="#" class="heading">Button</a>
<div class="content">Lorem ipsum dolor sit amet</div>
 
  <a href="#" class="heading1">Button2</a>
<div class="content1">Lorem ipsum dolor sit amet2</div>
<script>
 
$(document).ready(function() {
  $(".content").hide();
  $(".content1").hide();
 
  //toggle the componenet with class msg_body
  $(".heading").click(function()
  {
    $(this).next(".content").slideToggle(500);
    
  });
  $(".heading1").click(function()
  {
    $(this).next(".content1").slideToggle(500);
    
  });
 
});</script>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 09.07.2012, 18:21
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

cheba,
Как сделать смену текста по клику на ссылку?
Ответить с цитированием
  #3 (permalink)  
Старый 10.07.2012, 08:54
Интересующийся
Отправить личное сообщение для cheba Посмотреть профиль Найти все сообщения от cheba
 
Регистрация: 09.07.2012
Сообщений: 16

Спасибо, но немного не то что нужно было.

Ищу решения.

Я в этом профан. =(
Ответить с цитированием
  #4 (permalink)  
Старый 10.07.2012, 09:21
Кандидат Javascript-наук
Отправить личное сообщение для jeysmook Посмотреть профиль Найти все сообщения от jeysmook
 
Регистрация: 24.04.2012
Сообщений: 118

<!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>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function() {
  $(".content").hide();
  $(".content1").hide(); 
  //toggle the componenet with class msg_body
  $(".heading").click(function(){
	var content = $('.content1');
    $('.content').slideToggle(500); 
	if(content.css('display')=='block'){
		content.slideUp(500);
	}
  });
  $(".heading1").click(function(){
	var content = $('.content');
    $('.content1').slideToggle(500);
	if(content.css('display')=='block'){
		content.slideUp(500);
	}  
  }); 
});
</script>
</head>
 
<body>
 
Меню:
<ul>
	<li><a href="#" class="heading">Button</a></li>
	<li><a href="#" class="heading1">Button2</a></li>
</ul>
 
Текст:
<a href="#" class="heading">Button</a>
<a href="#" class="heading1">Button2</a>
<div class="content">Lorem ipsum dolor sit amet</div>
<div class="content1">Lorem ipsum dolor sit amet2</div>
</body>
</html>

Последний раз редактировалось jeysmook, 10.07.2012 в 09:26.
Ответить с цитированием
  #5 (permalink)  
Старый 10.07.2012, 10:02
Интересующийся
Отправить личное сообщение для cheba Посмотреть профиль Найти все сообщения от cheba
 
Регистрация: 09.07.2012
Сообщений: 16

Круто! Спасибо! ТОлько вот когда подставляю к ссылкам тег <p> он автоматом присваивает стиль display:none;

Еще минус. При нажатии ссылки все время отправляет вверх страницы.

<!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>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function() {
  $(".one").hide();
  $(".too").hide(); 
  //toggle the componenet with class msg_body
  $(".textone").click(function(){
	var content = $('.too');
    $('.one').slideToggle(500); 
	if(content.css('display')=='block'){
		content.slideUp(500);
	}
  });
  $(".texttoo").click(function(){
	var content = $('.one');
    $('.too').slideToggle(500);
	if(content.css('display')=='block'){
		content.slideUp(500);
	}  
  }); 
});
</script>
</head>
 
<body>
 
Меню:
<ul>
	<li><a href="#" class="textone">Button</a></li>
	<li><a href="#" class="texttoo">Button2</a></li>
</ul>
 
Текст:
<a href="#" class="textone">Button</a>
<a href="#" class="texttoo">Button2</a>
<div class="one">Lorem ipsum dolor sit amet</div>
<div class="too">Lorem ipsum dolor sit amet2</div>
</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 10.07.2012, 10:44
Кандидат Javascript-наук
Отправить личное сообщение для jeysmook Посмотреть профиль Найти все сообщения от jeysmook
 
Регистрация: 24.04.2012
Сообщений: 118

Вроде норм...
<!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>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script> 
$(document).ready(function() {
  $(".content, .content1").css('display','none');
  //toggle the componenet with class msg_body
  $(".heading").click(function(){
	var content = $('.content1');
    $('.content').slideToggle(500); 
	if(content.css('display')=='block'){
		content.slideUp(500);
	}
	return false;
  });
  $(".heading1").click(function(){
	var content = $('.content');
    $('.content1').slideToggle(500);
	if(content.css('display')=='block'){
		content.slideUp(500);
	} 
	return false;
  }); 
});
</script>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
 
<body>
<p>Меню 1</p>
<ul class="menu">
	<li><a href="#" class="heading">Button</a></li>
	<li><a href="#" class="heading1">Button2</a></li>
</ul>
<p>Меню 2</p>
<ul class="menu">
	<li><p><a href="#" class="heading">Button</a></p></li>
	<li><p><a href="#" class="heading1">Button2</a></p></li>
</ul>
<div class="content">Lorem ipsum dolor sit amet</div>
<div class="content1">Lorem ipsum dolor sit amet2</div>
</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 10.07.2012, 19:41
Интересующийся
Отправить личное сообщение для cheba Посмотреть профиль Найти все сообщения от cheba
 
Регистрация: 09.07.2012
Сообщений: 16

Спасибо! Все заработало!

Есть просьба последняя. А можно добавить открытому элементу (активированному) id="active" (или что-то на подобии) только чтобы он появлялся не в ссылке меню а в ссылке рядом с текстом. (чтобы я смог на ссылку повесить стили когда активен текст)
Ответить с цитированием
  #8 (permalink)  
Старый 11.07.2012, 10:07
Кандидат Javascript-наук
Отправить личное сообщение для jeysmook Посмотреть профиль Найти все сообщения от jeysmook
 
Регистрация: 24.04.2012
Сообщений: 118

Описуйте проблему сразу и полностью
<!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>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script> 
$(document).ready(function() {
  $(".content, .content1").css('display','none');
  //toggle the componenet with class msg_body
  $(".heading").click(function(){
	var content = $('.content1');
    $('.content').slideToggle(500);
	$('.menu2 li a').removeAttr('id');
	$('.menu2 li a.heading').attr('id','active'); 
	if(content.css('display')=='block'){
		content.slideUp(500);
	}	
	return false;
  });
  $(".heading1").click(function(){
	var content = $('.content');
    $('.content1').slideToggle(500);
	$('.menu2 li a').removeAttr('id');
	$('.menu2 li a.heading1').attr('id','active');
	if(content.css('display')=='block'){
		content.slideUp(500);		
	} 
	return false;
  }); 
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#active{
	background:#eee;
	color:#333;
	text-decoration:none;
	border:1px solid #c0c0c0;
	border-radius:5px;
	padding:5px 10px 5px 10px;
}
</style>
</head>
 
<body>
<p>Меню 1</p>
<ul class="menu">
	<li><a href="#" class="heading">Button</a></li>
	<li><a href="#" class="heading1">Button2</a></li>
</ul>
<p>Меню 2</p>
<ul class="menu2">
	<li><p><a href="#" class="heading">Button</a></p></li>
	<li><p><a href="#" class="heading1">Button2</a></p></li>
</ul>
<div class="content">Lorem ipsum dolor sit amet</div>
<div class="content1">Lorem ipsum dolor sit amet2</div>
</body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 12.07.2012, 11:56
Интересующийся
Отправить личное сообщение для cheba Посмотреть профиль Найти все сообщения от cheba
 
Регистрация: 09.07.2012
Сообщений: 16

=) Супер! Только при закрытии остается активной почему-то.
Ответить с цитированием
  #10 (permalink)  
Старый 13.07.2012, 09:41
Интересующийся
Отправить личное сообщение для cheba Посмотреть профиль Найти все сообщения от cheba
 
Регистрация: 09.07.2012
Сообщений: 16

Это сделать нельзя?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Выравнять три дива в одной строке debugx (X)HTML/CSS 9 06.10.2011 12:03
lastChild работает в IE, как тут быть? Puaris83 Firefox/Mozilla 4 17.04.2010 23:56
Вопрос по относительному позиционированию DIV XPOMOB (X)HTML/CSS 11 15.07.2009 17:02