slideToggle (поочередное открытие ссылок со скрытым текстом)
function MovingDiv(el) {
var elem=document.getElementById(el);
for (i=1;i<=4;i++){
if (i!=elem){
$('#'+i).slideUp("slow");
//document.getElementById(i).style.display='none';
}
}
$(elem).slideToggle("slow");
$(this).toggleClass("active");
}
<div><a href="#" onclick="MovingDiv('1'); ">Кликни сюда1</a></div>
<div id="1" style="display:none;">Текст скрытый1</div><br><br>
<div><a href="#" onclick="MovingDiv('2'); ">Кликни сюда2</a></div>
<div id="2" style="display:none;">Текст скрытый2</div><br><br>
<div><a href="#" onclick="MovingDiv('3'); ">Кликни сюда3</a></div>
<div id="3" style="display:none;">Текст скрытый3</div><br><br>
<div><a href="#" onclick="MovingDiv('4'); ">Кликни сюда4</a></div>
<div id="4" style="display:none;">Текст скрытый4</div>
хочу реализовать поочередное открытие ссылок. Но при повторном нажатии на ссылку (чтоб закрыть её) она закрывается и открывается заново. Я так понимаю это изза SlideUp... Подскажите как мне это правильнее реализовать. P.s. JS только начинаю изучать... |
Непонятно алгоритм.
При нажатии на любую из ссылок должны открываться все ссылки по очередно? или только та на которую нажали? |
вариант1:
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('dl dt a').click(function(event) {
$(event.target).parent('dt').next('dd').slideToggle(300);
event.peventDefault();
});
});
</script>
<dl>
<dt><a href="#">click</a></dt>
<dd>Текст скрытый1</dd>
<dt><a href="#">click</a></dt>
<dd>Текст скрытый2</dd>
<dt><a href="#">click</a></dt>
<dd>Текст скрытый3</dd>
<dl>
<style type="text/css">dd {display: none;}</style>
вариант2:
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('dl dt a').click(function(event) {
$(event.target).parent('dt').next('dd').slideToggle(300).siblings('dd').hide();
event.peventDefault();
});
});
</script>
<dl>
<dt><a href="#">click</a></dt>
<dd>Текст скрытый1</dd>
<dt><a href="#">click</a></dt>
<dd>Текст скрытый2</dd>
<dt><a href="#">click</a></dt>
<dd>Текст скрытый3</dd>
<dl>
<style type="text/css">dd {display: none;}</style>
|
Цитата:
... monolithed похоже 2 вариант самое то. Спасибо |
А как теперь закрыть скрытый текст, щёлкнув по ссылке "Закрыть", которая расположена как раз в этом скрытом тексте.
Т.е. нужно реализовать 2 варианта закрытия скрытого текста... |
с закрытием скрытого текста разобралась.
Почему так не работает :
<html>
<head>
<title>Главная страница сайта</title>
<head>
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('table tr td a.slide').click(function(event) {
$(event.target).parent('td').next('div').slideToggle(500).siblings('div').hide();
});
});
</script>
</head>
<body>
<table>
<tr>
<td>
<a href="#"><!--какая то ссылка-->
<img src="pic.jpg" >
</a>
</td>
<td>
<!--нажатием на эту ссылку должен открываться и закрываться скрытый текст-->
<a class="slide" href="#" title="Подробнее..." > Показать скрытый текст
</a>
</td>
</tr>
</table>
<div style="display:none;;">
<p>
Скрытый текст
</p>
<div class="columns">
<div class="column1">
<a href="#"><!--какая то ссылка-->
Фотографии
</a>
</div>
<div class="column2" align="right">
<a href="#">Свернуть</a><!--нажатием на эту ссылку должен закрываться скрытый текст-->
</div>
</div>
</div>
</body>
</html>
|
ну подскажите же:cray:
|
| Часовой пояс GMT +3, время: 22:43. |