Форум

Luna82 · #1 (**permalink**) 20.05.2011, 15:46

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 только начинаю изучать...

Konstantin.R.Dark · #2 (**permalink**) 20.05.2011, 18:32

Непонятно алгоритм.

При нажатии на любую из ссылок должны открываться все ссылки по очередно? или только та на которую нажали?

monolithed · #3 (**permalink**) 20.05.2011, 20:30

вариант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>

Luna82 · #4 (**permalink**) 21.05.2011, 18:30

Сообщение от Konstantin.R.Dark

Непонятно алгоритм.

При нажатии на любую из ссылок должны открываться все ссылки по очередно? или только та на которую нажали?

при нажатии должна открываться ссылка, другая (если открыта) должна закрываться...наподобие аккордеона. но закрыть ссылку можно при повторном нажатии на ссылку и при нажатии на ссылку "закрыть" в тексте открывающегося скрытого текста
...
monolithed похоже 2 вариант самое то. Спасибо

Luna82 · #5 (**permalink**) 30.05.2011, 13:15

А как теперь закрыть скрытый текст, щёлкнув по ссылке "Закрыть", которая расположена как раз в этом скрытом тексте.
Т.е. нужно реализовать 2 варианта закрытия скрытого текста...

Luna82 · #6 (**permalink**) 31.05.2011, 11:29

с закрытием скрытого текста разобралась.
Почему так не работает :

<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>

Luna82 · #7 (**permalink**) 05.06.2011, 11:50

ну подскажите же

Форум

Справочник

Discord чат

Курсы javascript