Не срабатывает скрипт jQuery

@Heidel · Регистрация: 11.10.2011

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

Для списков объектов

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
<div class='view-source'>
    <h3><a href="#" class="click">Магнитные барабаны</a></h3>
        <div class="hide">
            <ul>
                       <li>...</li>
                    </ul>
        </div>
</div>
 
<div class='view-source'>
    <h3><a href="#" class="click">Магнитные плиты </a></h3>
        <div class="hide">
            <ul>
                       <li>...</li>
                    </ul>
        </div>
</div>
 
<div class='view-source'>
    <h3><a href="#" class="click">Магнитные решетки</a></h3>
        <div class="hide">
            <ul>
                       <li>...</li>
                    </ul>
        </div>
</div>

пишется скрипт, чтобы по щелчку на ссылке открывался список под конкретной ссылкой

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript" src="/jquery/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    //Раскрывающийся список
    $(".view-source .hide").hide();
    $(".view-source a.click").toggle(
     function(){
        $(this).siblings('.hide').stop(false, true).slideDown(500);
       }, 
     function(){
        $(this).siblings('.hide').stop(false, true).slideUp(500);
     });
}); 
</script>

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

@Alex_pac · 21.09.2012, 21:57

JavaScript
1
2
3
4
$(".view-source div.hide").hide();
$(".view-source a.click").click(function(){
 $(".view-source div.hide").eq($(".view-source a.click").index(this)).slideToggle('fast');
});

@Heidel · 21.09.2012, 22:01 **[ТС]**

Alex_pac, не работает ваш скрипт)
все списки отображаются в развернутом виде

@Alex_pac · 21.09.2012, 22:05

Сообщение от Heidel

Alex_pac, не работает ваш скрипт)
все списки отображаются в развернутом виде

Полный код страницы в студию!

Добавлено через 3 минуты
САБЖ

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
<!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" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <script type="text/javascript" src="http://yandex.st/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
    $(".view-source div.hide").hide();
$(".view-source a.click").click(function(){
 $(".view-source div.hide").eq($(".view-source a.click").index(this)).slideToggle('fast');
});
});
</script>
 
    <div class='view-source'>
    <h3><a href="#" class="click">Магнитные барабаны</a></h3>
        <div class="hide">
            <ul>
                       <li>11111</li>
                       <li>22222</li>
                       <li>33333</li>
                       <li>44444</li>
                    </ul>
        </div>
</div>
 
<div class='view-source'>
    <h3><a href="#" class="click">Магнитные плиты </a></h3>
        <div class="hide">
            <ul>
                       <li>11111</li>
                       <li>22222</li>
                       <li>33333</li>
                       <li>44444</li>
                    </ul>
        </div>
</div>
 
<div class='view-source'>
    <h3><a href="#" class="click">Магнитные решетки</a></h3>
        <div class="hide">
            <ul>
                       <li>11111</li>
                       <li>22222</li>
                       <li>33333</li>
                       <li>44444</li>
                    </ul>
        </div>
</div>
</body>
</html>

@Heidel · 21.09.2012, 22:21 **[ТС]**

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
<h2 class='headline'>Каталог</h2>
<div class='news floatbox'>
    <!-- Магнитные барабаны и сепараторы барабанного типа -->
<div class='view-source'>
    <h3><a href="#" class="click">Магнитные барабаны и сепараторы барабанного типа</a></h3>
        <div class="hide">
            <div class='news floatbox' style="background: none;">
<ul>
                  
 
<h3><li><a href="/products/baraban/baraban_11.html">Сепаратор магнитный СМс</a></li></h3>
 
 
<h3><li><a href="/products/baraban/baraban_10.html">Сепаратор магнитный СМж</a></li></h3>
 
 
<h3><li><a href="/products/baraban/baraban_9.html">Сепаратор магнитный СМг</a></li></h3>
 
 
<h3><li><a href="/products/baraban/baraban_8.html">Сепаратор магнитный СМв</a></li></h3>
 
 
<h3><li><a href="/products/baraban/baraban_7.html">Сепаратор магнитный СВг</a></li></h3>
 
 
<h3><li><a href="/products/baraban/baraban_6.html">Сепаратор магнитный СМб</a></li></h3>
 
 
<h3><li><a href="/products/baraban/baraban_5.html">Магнитный барабан БМт</a></li></h3>
 
</ul>
</div>      </div>
</div>
<!-- Магнитные плиты и сепараторы подвесного типа -->
<div class='view-source'>
    <h3><a href="#" class="click">Магнитные плиты и сепараторы подвесного типа</a></h3>
        <div class="hide">
            <div class='news floatbox' style="background: none;">
<ul>
                  
 
<h3><li><a href="/products/podves/podves_13.html">Плита магнитная ПМск</a></li></h3>
 
 
<h3><li><a href="/products/podves/podves_12.html">Сепаратор магнитный СМп</a></li></h3>
 
 
<h3><li><a href="/products/podves/podves_3.html">Плита магнитная ПМр</a></li></h3>
 
</ul>
</div>      </div>
</div>
<!-- Магнитные решетки и сепараторы штыревого типа -->
<div class='view-source'>
    <h3><a href="#" class="click">Магнитные решетки и сепараторы штыревого типа</a></h3>
        <div class="hide">
            <div class='news floatbox' style="background: none;">
<ul>
                  
 
<h3><li><a href="/products/shtir/shtir_16.html">Магнитный штырь и магнитная решетка ШМ и РМ</a></li></h3>
 
 
<h3><li><a href="/products/shtir/shtir_15.html">Сепаратор магнитный ФМж</a></li></h3>
 
 
<h3><li><a href="/products/shtir/shtir_14.html">Сепаратор магнитный СМш</a></li></h3>
 
 
<h3><li><a href="/products/shtir/shtir_4.html">Сепаратор магнитный СМша</a></li></h3>
 
</ul>
</div>

Добавлено через 15 минут
Alex_pac, фигасе О_О заработало
в кэше, что ли, что застряло

но как-то оно, блин, некрасиво прыгает вверх страницы при кликах.
вот здесь у меня сделан один список, он плавно открывается и закрывается http://elmat.inetech.ru/zayavka/

но там только один список, а как быть с несколькими, чтобы они не открывались одновременно, я не знаю, это на этой странице http://elmat.inetech.ru/products/, получается, всё время при кликах перескакивает вверх

Vovan-VE · 22.09.2012, 07:49

Сообщение от Heidel

JavaScript
1
2
3
$(".view-source a.click").toggle(
    function(){
        $(this).siblings('.hide')

У a.click нет никаких братьев, она единственная внутри родителя h3.

JavaScript
1
2
3
4
5
6
7
$('body').on('click', '.view-source a.click', function(){
    $(this)
        .closest('.view-source')
        .find('> .hide')
        .stop()
        .slideToggle();
});

@Alex_pac · 22.09.2012, 10:25

http://cssglobe.com/easy-slide... r-sliding/
там этот работает поэтому все гладко. Ваще надо просто css подправить чтобы отступов не было тогда slideToggle тоже будет относительно гладким.

@Heidel · 22.09.2012, 17:49 **[ТС]**

Vovan-VE,

Сообщение от Vovan-VE

Код JavaScript
1
2
3
4
5
6
7
$('body').on('click', '.view-source a.click', function(){
* * $(this)
* * * * .closest('.view-source')
* * * * .find('> .hide')
* * * * .stop()
* * * * .slideToggle();
});

этот код отображает все списки изначально в развернутом виде)

в общем, в конечном итоге сделала по найденному образцу так

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
<h2 class='headline'>Каталог</h2>
<div class='news floatbox'>
    <!-- Магнитные барабаны и сепараторы барабанного типа -->
<div class='view-source'>
    <div class="cat_click"><h3>Магнитные барабаны и сепараторы барабанного типа</h3></div>
        <div class="cat_list">
            <ul>
                                <li>...</li>
                        </ul>
        </div>
</div>
<!-- Магнитные плиты и сепараторы подвесного типа -->
<div class='view-source'>
    <div class="cat_click"><h3>Магнитные плиты и сепараторы подвесного типа</h3></div>
        <div class="cat_list">
            <ul>
                                <li>...</li>
                        </ul>
        </div>
</div>
<!-- Магнитные решетки и сепараторы штыревого типа -->
<div class='view-source'>
    <div class="cat_click"><h3>Магнитные решетки и сепараторы штыревого типа</h3></div>
        <div class="cat_list">
            <ul>
                                <li>...</li>
                        </ul>
        </div>
</div>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
    //Раскрывающийся список
     $(document).ready(function(){
        $(".cat_list").hide();
        $(".cat_click").click(function(){
            $(this).closest(".view-source").find(".cat_list").slideToggle('slow');
            return false;
        });
    });
</script>

Vovan-VE · 22.09.2012, 17:51

Сообщение от Heidel

этот код отображает все списки изначально в развернутом виде)

CSS
1
2
3
.view-source .hide {
    display: none;
}

@Heidel · 22.09.2012, 17:54 **[ТС]**

Vovan-VE, да я уже переделала на приведенный выше вариант)
ссылки в качестве элемента, по которому нужно кликать, чтобы скрытый текст раскрылся, мне как-то не очень нравятся.

Новые блоги и статьи Все статьи Все блоги /
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

@Heidel 115 / 115 / 39 Регистрация: 11.10.2011 Сообщений: 649
	21.09.2012, 22:01 [ТС]
	Alex_pac, не работает ваш скрипт) все списки отображаются в развернутом виде 0

@Alex_pac 1302 / 708 / 107 Регистрация: 25.05.2011 Сообщений: 2,158 Записей в блоге: 51
	22.09.2012, 10:25
	http://cssglobe.com/easy-slide... r-sliding/ там этот работает поэтому все гладко. Ваще надо просто css подправить чтобы отступов не было тогда slideToggle тоже будет относительно гладким. 0

@Heidel 115 / 115 / 39 Регистрация: 11.10.2011 Сообщений: 649
	22.09.2012, 17:54 [ТС]
	Vovan-VE, да я уже переделала на приведенный выше вариант) ссылки в качестве элемента, по которому нужно кликать, чтобы скрытый текст раскрылся, мне как-то не очень нравятся. 0