Свернуть\развернуть по ссылке

@illuminati · Регистрация: 14.06.2010

Студворк — интернет-сервис помощи студентам

Вот хочу научиться работать с jQ, но что-то не получается. Хочу чтобы див сворачивался и разворачивался по нажатию на ссылку. Что не так ?

HTML5
1
2
3
4
5
6
7
8
9
<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
</head>
<body>
<a onclick="$('#1').slideToggle('slow');" href="javascript://">Свернуть/Развернуть</a> 
<div id="1">Ku-ku!</div>
</body>
</html>

@Good-bad man · 17.12.2010, 08:19

1) Какой-то у вас jQuery cтарый. Обновите - http://jquery.com
2) Атрибут id не может иметь значение начинающееся с цифры. Т.е. не id="1", а id="id1"
3) У меня всё работает. jQuery 1.4.4

@illuminati · 17.12.2010, 22:39 **[ТС]**

Good-bad man, спасибо, понял всё)
еще один вопрос: у меня есть несколько дивов, каждому есть ссылка которая его разворачивает\сворачивает, как сделать так, что бы одновременно был развернут только 1 див, а все остальные сворачивались автоматом? функцию писать?

@Good-bad man · 18.12.2010, 18:30

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<head>
<style type="text/css">
    div#container > div{
        display:none;
    }
</style>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
function showDiv(div){
  $("div#container > div").slideUp(600);
    $("div#"+div).slideDown(600);
}
</script>
</head>
<body>
<div id="container">
<div id="div1">DIV1</div>
<div id="div2">DIV2</div>
<div id="div3">DIV3</div>
</div>
<a href="javascript://" onclick="showDiv('div1')">Отобразить #div1</a><br>
<a href="javascript://" onclick="showDiv('div2')">Отобразить #div2</a><br>
<a href="javascript://" onclick="showDiv('div3')">Отобразить #div3</a>
</body>
</html>

@Keler · 20.01.2011, 18:15

Извиняюсь что влез в тему. Но у меня похожая проблема

.

1.При нажатии на button, elements раскрывается - все супер, но если быстро нажимать то она(elements) в конце концов свернется.
Как можно этого избежать?

Не могу понять.

Вот коде:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!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" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<title>Мои кнопки</title>
<style type="text/css">
.element
{
    width:1000px;
    height:20px;
    background-color:#099;
    margin:10px;
    
}
.button
{
    width:300px;
    height:20px;
    background-color:#333;
    color:#CCC;
    margin:10px;
    cursor:pointer;
}
#left
{
    float:left;
}
#right
{
    float:right;
}
</style>
 
<script type="application/ecmascript">
 
$(document).ready(function()
{
    $(".button").click(function ()
    {
      var ids = $(this).attr("id");
      var ids = ids.replace('b','');
      if ($("#d"+ids).height() == 20)
      {
         $("#d"+ids).animate({height: "+=30"},200);
      }
      else
      {
         $("#d"+ids).animate({height: "-=30"},200); 
      }
    });
})
</script>
</head>
 
<body>
<div id="left">
<div class="element" id="d1"></div>
<div class="element" id="d2"></div>
<div class="element" id="d3"></div>
<div class="element" id="d4"></div>
<div class="element" id="d5"></div>
<div class="element" id="d6"></div>
<div class="element" id="d7"></div>
<div class="element" id="d8"></div>
<div class="element" id="d9"></div>
<div class="element" id="d10"></div>
</div>
<div id="right">
<div class="button" id="b1"></div>
<div class="button" id="b2"></div>
<div class="button" id="b3"></div>
<div class="button" id="b4"></div>
<div class="button" id="b5"></div>
<div class="button" id="b6"></div>
<div class="button" id="b7"></div>
<div class="button" id="b8"></div>
<div class="button" id="b9"></div>
<div class="button" id="b10"></div>
</div>
</body>
</html>

@suharik · 20.01.2011, 18:42

насколько я помню нужно стопорить

JavaScript
1
 $("#d"+ids).stop().animate({height: "+=30"},200);

@Keler · 20.01.2011, 18:48

Увы не помогло.

17.02.2011, 00:23

Здравствуйте, уважаемые форумчане.
Сразу проше не бить меня ногами, я уважаю Ваше время, но решить проблему своими силами не могу. Поэтому прошу помощи у тех, кто найдет возможность.
Суть вот в чем - нужно сделать сайт на РНР с принципом навигации и отображения информации как вот тут
Вопрос целесообразности очень прошу не поднимать.
основательно порыл Ваш форум и, как мне показалось, нашел подходящий мне пример скрипта в этом посте. К сожалению, моих возможностей и знаний не хватило на то, чтобы все сделать как следует.
Пытался разобраться хотя бы в принципе действия и сделал вот это:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<html>
<head>
<title></title>
<link rel="stylesheet" href="" type="text/css" media="screen" />
<style>
 
#iMenu          {float: left;
         width: 515px;
         border: 1px solid;
} 
#iMenu div.cBtn {float: left;
         width: 200px;
         height: 40px;
         line-height: 53px;
         text-align: center;
         cursor: pointer;
         font-weight: bold;
         color: black;
         text-decoration: underline;
         font-size:14px;
         border: 1px solid;
} 
#iMenu div.cBtn img {    width: 14px;
            height: 14px; 
            margin: 0px 10px 0px 0px; 
}
 
#iMenu #iClr    {clear: both} 
 
/* панель, которая выдвигается */
 
#iMenu div.cPan {float: left;
         overflow: hidden;
         width: 1px;
         height: 100%} 
#iMenu #iPan1   {margin: 0 10px} 
 
/* link1 стили для 1-ой раскрывающейся фигни */
  
.vneshniy_link1 { width:100px; 
           height: 50px;
                   margin:0 auto; padding:0px;
               position: relative;
               left: 0px;
           top: 0px;
           border: 1px solid;
}
 
/* link2 стили для 2-ой раскрывающейся фигни */
  
.vneshniy_link2 { width:100px; 
           height: 50px;
                   margin:0 auto; padding:0px;
               position: relative;
               left: 105px;
           bottom: 52px;
           border: 1px solid;
}
<!--[if IE]><style>#iMenu {width: 515px}</style><![endif]-->  <!-- ширина меню если браузер IE -->
</style>  
 
    <script src="" type="text/javascript"></script>
<script>
// JavaScript Document
<!-- ФУНКЦИЯ ДЛЯ РАСКРЫТИЯ МЕНЮ -->
 
var gStatus = new Array (0, 0, 0); //Статус трёх пар "кнопка/панель": 
// 0 - кнопка активна    / панель полностью свёрнута 
// 1 - кнопка недоступна / панель в процессе разворачивания 
// 2 - кнопка активна    / панель полностью развёрнута 
// 3 - кнопка недоступна / панель в процессе сворачивания 
 
var gTimer = null; //состояние таймера 
 
function fChangeStatus (x) 
{ 
if (gStatus [x] % 2) return;              //статус нечётный (1 или 3), кнопка недоступна, выходим из функции 
gStatus [x] = (!gStatus [x]) ? 1 : 3;     //установка нового статуса (1 - разворачиваем или 3 - сворачиваем) 
with (document.getElementById ('iBtn' + x).style) 
{fontWeight = 'normal'; color = 'gray'; textDecoration = 'none'; cursor = 'default'} //делаем кнопку неактивной 
document.getElementById ('iBtn' + x).firstChild.style.visibility = 'hidden';
if (!gTimer) fProcess ();                 //запускаем таймер, если он ещё не включён 
} 
 
function fProcess () 
{ 
for (var k = j = 0, l = gStatus.length; j < l; j++) //просматриваем статусы всех пар "кнопка-панель" 
   { 
   var st = gStatus [j]; if (st % 2) //если статус нечётный (1 или 3), то сворачиваем/разворачиваем 
      { 
      var obj = document.getElementById ('iPan' + j); 
      var wd = obj.offsetWidth + 2 * ((st == 1) ? 1 : -2); //определяем текущую ширину панели и изменяем её (в плюс или в минус, в зависимости от статуса) 
      obj.style.width = wd + 'px'; 
      
       if (st == 1 && wd == obj.scrollWidth) {gStatus [j] = 2;} //меняем статус на "полностью развёрнута" 
      if (st == 3 && wd == 1) {gStatus [j] = 0;} //меняем статус на "полностью свёрнута" 
      if (st != gStatus [j]) {with (document.getElementById ('iBtn' + j).style) 
      {fontWeight = 'bold'; color = 'black'; textDecoration = 'underline'; cursor = 'pointer'} //делаем кнопку активной 
      
      document.getElementById ('iBtn' + j).firstChild.style.visibility = 'visible'}
      
      else k++; //статус не изменился, надо продолжать процесс, меняем флаг 
      } 
   } 
if (k) gTimer = setTimeout (fProcess, 5); else gTimer = null; //продолжаем процесс или выходим из него 
} 
</script>
 
</head>
 
<body>
                
               <div id="iMenu"> 
               
               <div class="cBtn" id="iBtn0" onclick="fChangeStatus (0)" float="left"><img src="" />Выдвинуть/Задвинуть</div> 
               
               <div class="cPan" id="iPan0">
               
                            <div class="vneshniy_link1">
                текст_1
                            </div>
 
                            <div class="vneshniy_link2">
                текст_2
                            </div>
 
                  <div id="iClr"></div>
 
              </div> <!-- #iPan0 -->
                                          
            </div> <!-- #iMenu -->
 
</body>
</html>

Сейчас важен сам принцип действия, а не внешний вид. Не могу понять, почему первый блок, после открывания, сдвигается вправо пока не откроется второй. Так же не могу понять, как добавить последующие пункты "меню" слева, кторые будут анимировать ДРУГИЕ блоки..
Если не затруднит, помогите советом или примером. Может, я вообще не в том направлении двигаюсь.
Заранее спасибо!

@Blagoy · 08.07.2011, 01:33

На сайте стоит скрипт свернуть\развернуть по ссылке, подскажите пожалуйста, как у активной ссылки изменить стиль оформления (class)?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
 
<script type="text/javascript">
function openDiv (id) {
$(".openDiv").css({display:'none'});
$('#'+id+'').fadeIn(800);
};
</script>
 
<style>
 .openDiv{display:none;}
</style>
 
<a class="spoiler" href="javascript:void(0)" onClick="openDiv('1')">Развернуть 1</a>
<a class="spoiler" href="javascript:void(0)" onClick="openDiv('2')">Развернуть 2</a>
 
<div id="1" class="openDiv" >Текст 1</div>
<div id="2" class="openDiv" >Текст 2</div>

@ctpz · 14.07.2011, 10:50

Ссылкам лучше id задавать, а не class

@jager88 · 14.08.2017, 08:59

Подскажите, как сделать так, чтобы при первой загрузке страницы все дивы были свёрнуты?
В 1-м скрипте в этой теме дивы развёрнуты, нужно сделать наоборот.

@Уф · 14.08.2017, 09:16

CSS
1
2
3
div {
  display:none;
}

@jager88 · 14.08.2017, 09:20

Спасибо за быстрый ответ.

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@Good-bad man 256 / 234 / 38 Регистрация: 31.10.2010 Сообщений: 504
	17.12.2010, 08:19
	1) Какой-то у вас jQuery cтарый. Обновите - http://jquery.com 2) Атрибут id не может иметь значение начинающееся с цифры. Т.е. не id="1", а id="id1" 3) У меня всё работает. jQuery 1.4.4 1

@illuminati 21 / 21 / 5 Регистрация: 14.06.2010 Сообщений: 108
	17.12.2010, 22:39 [ТС]
	Good-bad man, спасибо, понял всё) еще один вопрос: у меня есть несколько дивов, каждому есть ссылка которая его разворачивает\сворачивает, как сделать так, что бы одновременно был развернут только 1 див, а все остальные сворачивались автоматом? функцию писать? 0

@Keler 0 / 0 / 0 Регистрация: 20.06.2010 Сообщений: 6
	20.01.2011, 18:48
	Увы не помогло. 0

@ctpz 4 / 4 / 1 Регистрация: 02.07.2011 Сообщений: 39
	14.07.2011, 10:50
	Ссылкам лучше id задавать, а не class 0

@jager88 0 / 0 / 0 Регистрация: 21.09.2016 Сообщений: 9
	14.08.2017, 08:59
	Подскажите, как сделать так, чтобы при первой загрузке страницы все дивы были свёрнуты? В 1-м скрипте в этой теме дивы развёрнуты, нужно сделать наоборот. 0

@jager88 0 / 0 / 0 Регистрация: 21.09.2016 Сообщений: 9
	14.08.2017, 09:20
	Спасибо за быстрый ответ. 0