Не срабатывает скрипт 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, да я уже переделала на приведенный выше вариант)
ссылки в качестве элемента, по которому нужно кликать, чтобы скрытый текст раскрылся, мне как-то не очень нравятся.

Новые блоги и статьи Все статьи Все блоги /
Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .	Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .
Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .

@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