Форум

Boony · #1 (**permalink**) 04.05.2011, 06:30

Здравствуйте, имеется вот такой вот скрипт открытия и закрытия <div>

Код:

<html>
<head>
<title>Пример</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script>
function one (objName) {
  if ( $(objName).css('display') == 'none' ) {
    $(objName).animate({height: 'show'}, 400);
  } else {
    $(objName).animate({height: 'hide'}, 200);
  }
}
function two (objName) {
  if ( $(objName).css('display') == 'none' ) {
    $(objName).animate({height: 'show'}, 400);
  } else {
    $(objName).animate({height: 'hide'}, 200);
  }
}
</script>
<style type="text/css">
body {
background-color: #ffa999;
}

#1 {
background-color: #ffffff;
margin-left: 20%;
width: 70%;
border-radius: 4px;
border: 1px solid black;
}
#2 {
background-color: #ffffff;
margin-left: 20%;
width: 70%;
border-radius: 4px;
border: 1px solid black;
}
ul {
background-color: #ffffff;
border-radius: 4px;
border: 1px solid black;
text-align: left;
width: 15%;
position: absolute;
}
</style>
</head>
<body>
<ul>
<li><a href="#" onclick="one('#1'); return false">Пример №1</a></li>
<li><a href="#" onclick="two('#2'); return false">Пример №2</a></li>
</ul>
<div id="1" style="display: none">
Пример №1</br>
Пример №1</br>
Пример №1</br>
Пример №1</br>
</div>
<div id="2" style="display: none">
Пример №2</br>
Пример №2</br>
Пример №2</br>
Пример №2</br>
</div>
</body>
</html>

Подскажите пожалуйста, как мне сделать так, чтобы сразу два блока не могли были открыты, т.е. при открытии одного сначала закрывался уже открытый, а только потом открывался запрашиваемый блок.

ASerputko · #2 (**permalink**) 04.05.2011, 09:08

<html>
<head>
<title>Пример</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script>
$(document).ready(function () {
	showContext = function (event) {
		//находим id и обрезаем два первых символа
		//ex1 => 1 или ex2 => 2
		var id = $(event.target).attr('id').slice(2);
		var $id = $('#' + id);
		//сохраняем состояние нашего текущего дивака 
		var idStatus = $id.css('display');
		//прячем все диваки, которые есть
		$('.show_display').animate({height: 'hide'}, 200);
		//текущий блок с информацией либо появится, либо исчезнет
		idStatus === 'none' ?
			$id.animate({height: 'show'}, 400) : $id.animate({height: 'hide'}, 200);
	}
	//кликнув на одну из наших ссылок (Пример №1, Пример №2)
	//запускаем функцию showContext, которая отобразит нужный нам текст
	$('ul li').bind('click', $.proxy(showContext, this));
});
</script>

<style type="text/css">
body {
background-color: #ffa999;
}

#1 {
background-color: #ffffff;
margin-left: 20%;
width: 70%;
border-radius: 4px;
border: 1px solid black;
}
#2 {
background-color: #ffffff;
margin-left: 20%;
width: 70%;
border-radius: 4px;
border: 1px solid black;
}
ul {
background-color: #ffffff;
border-radius: 4px;
border: 1px solid black;
text-align: left;
width: 15%;
position: absolute;
}
.show_display {
	display: none;
}
ul li {
	cursor: pointer;
	text-decoration: underline;
}
</style>

</head>
<body>
<ul>
<li id="ex1">Пример №1</li>
<li id="ex2">Пример №2</li>
</ul>
<div id="1" class="show_display">
Пример №1</br>
Пример №1</br>
Пример №1</br>
Пример №1</br>
</div>
<div id="2" class="show_display">
Пример №2</br>
Пример №2</br>
Пример №2</br>
Пример №2</br>
</div>
</body>
</html>

Boony · #3 (**permalink**) 04.05.2011, 11:18

премного благодарен вам, супер!

Форум

Справочник

Discord чат

Курсы javascript