VPF::accordeon - Форум программистов

Marlik

Дата 3.9.2011, 20:53 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 212
Регистрация: 25.2.2007
Где: Рязань

Репутация: нет
Всего: нет

Доброго времени суток, нужен простой скрипт accordeon, но с одной секцией, которая по умолчанию при загрузке закрыта. Никак не пойму как извернутся. Образец:

Код


<html><head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    </head>
    <body>
        <script>
            $(document).ready(function(){
                $(".accordion h3:first").addClass("active");
                $(".accordion p:not(:first)").hide();

                $(".accordion h3").click(function(){

                    $(this).next("p").slideToggle("slow")
                    .siblings("p:visible").slideUp("slow");
                    $(this).toggleClass("active");
                    $(this).siblings("h3").removeClass("active");
                });

            });
        </script>

        <div class="accordion">
            <h3>Общие положения</h3>
            <p>
            <table width='100%'>
                <tr>
                    <td align='left'>1.</td>
                    <td align='left'>
                        <a href='http://www.kaper.pro/statistika-prognozista.shtml?u=4 '>Серж Счастливый</a>
                    </td><td align='center'>224</td><td align='center'>руб.</td>
                </tr>
                <tr>
                    <td height='5' align='left'></td>
                    <td align='center'></td>
                    <td align='center'></td>
                </tr>
                <tr>
                    <td align='left'>2.</td>
                    <td align='left'><a href='http://www.kaper.pro/statistika-prognozista.shtml?u=25 '>Zirrus</a></td>
                    <td align='center'>212</td>
                    <td align='center'>руб.</td>
                </tr>
                <tr>
                    <td height='5' align='left'></td>
                    <td align='center'></td>
                    <td align='center'></td>
                </tr>
                <tr>
                    <td align='left'>3.</td>
                    <td align='left'>
                        <a href='http://www.kaper.pro/statistika-prognozista.shtml?u=3 '>Сергей Балаш</a>
                    </td>
                    <td align='center'>194</td>
                    <td align='center'>руб.</td>
                </tr>
                <tr>
                    <td height='5' align='left'></td>
                    <td align='center'></td>
                    <td align='center'></td>
                </tr>
                <tr>
                    <td align='left'>4.</td>
                    <td align='left'>
                        <a href='http://www.kaper.pro/statistika-prognozista.shtml?u=9 '>Оленька</a>
                    </td>
                    <td align='center'>171</td>
                    <td align='center'>10</td>
                </tr>
                <tr>
                    <td height='5' align='left'></td>
                    <td align='center'></td>
                    <td align='center'></td>
                </tr>
                <tr>
                    <td align='left'>5.</td>
                    <td align='left'>
                        <a href='http://www.kaper.pro/statistika-prognozista.shtml?u=5 '>Василий Уткин</a>
                    </td>
                    <td align='center'>168</td>
                    <td align='center'>10</td>
                </tr>
                <tr>
                    <td height='5' align='left'></td>
                    <td align='center'></td>
                    <td align='center'></td>
                </tr>
                <tr>
                    <td align='left'>6.</td>
                    <td align='left'>
                        <a href='http://www.kaper.pro/statistika-prognozista.shtml?u=23 '>Андрей Колдин</a>
                    </td>
                    <td align='center'>160</td>
                    <td align='center'>10</td>
                </tr>
                <tr>
                    <td height='5' align='left'></td>
                    <td align='center'></td>
                    <td align='center'></td>
                </tr>
                <tr>
                    <td align='left'>7.</td>
                    <td align='left'>
                        <a href='http://www.kaper.pro/statistika-prognozista.shtml?u=1 '>Marlik</a>
                    </td>
                    <td align='center'>140</td>
                    <td align='center'>10</td>
                </tr>
                <tr>
                    <td height='5' align='left'></td>
                    <td align='center'></td>
                    <td align='center'></td>
                </tr>
                <tr>
                    <td align='left'>8.</td>
                    <td align='left'>
                        <a href='http://www.kaper.pro/statistika-prognozista.shtml?u=7 '>akaDimasik</a>
                    </td>
                    <td align='center'>138</td>
                    <td align='center'>10</td>
                </tr>
                <tr>
                    <td height='5' align='left'></td>
                    <td align='center'></td>
                    <td align='center'></td>
                </tr>
                <tr>
                    <td align='left'>9.</td>
                    <td align='left'>
                        <a href='http://www.kaper.pro/statistika-prognozista.shtml?u=28 '>Ayteko</a>
                    </td>
                    <td align='center'>102</td>
                    <td align='center'>8</td>
                </tr>
                <tr>
                    <td height='5' align='left'></td>
                    <td align='center'></td>
                    <td align='center'></td>
                </tr>
                <tr>
                    <td align='left'>10.</td>
                    <td align='left'>
                        <a href='http://www.kaper.pro/statistika-prognozista.shtml?u=39 '>Slonomoska</a>
                    </td>
                    <td align='center'>101</td>
                    <td align='center'>6</td>
                </tr>
                <tr>
                    <td height='5' align='left'></td>
                    <td align='center'></td>
                    <td align='center'></td>
                </tr>
                <tr>
                    <td align='left'>11.</td>
                    <td align='left'>
                        <a href='http://www.kaper.pro/statistika-prognozista.shtml?u=43 '>клим</a>
                    </td>
                    <td align='center'>85</td>
                    <td align='center'>5</td>
                </tr>
                <tr>
                    <td height='5' align='left'></td>
                    <td align='center'></td>
                    <td align='center'></td>
                </tr>
                <tr>
                    <td align='left'>12.</td>
                    <td align='left'>
                        <a href='http://www.kaper.pro/statistika-prognozista.shtml?u=40 '>тихон</a>
                    </td>
                    <td align='center'>68</td>
                    <td align='center'>6</td>
                </tr>
                <tr>
                    <td height='5' align='left'></td>
                    <td align='center'></td>
                    <td align='center'></td>
                </tr>
                <tr>
                    <td align='left'>13.</td>
                    <td align='left'>
                        <a href='http://www.kaper.pro/statistika-prognozista.shtml?u=46 '>Мигель</a>
                    </td>
                    <td align='center'>32</td>
                    <td align='center'>3</td>
                </tr>
                <tr>
                    <td height='5' align='left'></td>
                    <td align='center'></td>
                    <td align='center'></td>
                </tr>
            </table>
        </p>
    </div>
</body>
</html>

Заранее спасибо.

Amphiluke

Дата 3.9.2011, 21:27 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 17
Всего: 112

Цитата(Marlik @ 4.9.2011, 00:53

)

$(".accordion p:not(:first)").hide();

Код


$(".accordion > p:eq(0)").hide();

?

И опять же у вас таблица в параграфе… smile

Как только вы решите уйти от Quirks mode, у вас всё развалится.

Marlik

Дата 4.9.2011, 10:56 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 212
Регистрация: 25.2.2007
Где: Рязань

Репутация: нет
Всего: нет

Ага, я понял спасибо, просто образца под рукой не оказалось, скопировал с предыдущей темы. Я так понимаю там просто поменять p на div. Работает, но при попытке развернуть сворачивается обратно. Попробую поискать решение, в нете. Документации к тому-же вообще нет.

Amphiluke

Дата 4.9.2011, 11:57 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 17
Всего: 112

Цитата(Marlik @ 4.9.2011, 14:56

)

при попытке развернуть сворачивается обратно.

Ничего подобного не наблюдаю. Смотрел в IE6-9, FF6, Opera9.63,11.50, Chrome13, Safari5.0.

Добавлено через 1 минуту и 26 секунд

Цитата(Marlik @ 4.9.2011, 14:56

)

Документации к тому-же вообще нет.

Нет документации к jQuery? Да ладно…

Marlik

Дата 4.9.2011, 15:58 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 212
Регистрация: 25.2.2007
Где: Рязань

Репутация: нет
Всего: нет

Цитата(Amphiluke @ 4.9.2011, 11:57)

Цитата(Marlik @ 4.9.2011, 14:56

)

при попытке развернуть сворачивается обратно.

Ничего подобного не наблюдаю. Смотрел в IE6-9, FF6, Opera9.63,11.50, Chrome13, Safari5.0.

У меня не работает вот ссылка. Это связано наверное с тем что работает на чистой странице. А у меня эти библиотеки подлючены в заголовочном файле так:

Код


<script type="text/javascript" src="http://www.kaper.pro/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.kaper.pro/jquery-ui-1.8.4.custom.min.js"></script>

То есть на странице, только код скрипта и текст. Пробовал их убрать и вставить линк на гугловскую, не помогло, куда рыть не представляю...

Цитата(Amphiluke @ 4.9.2011, 11:57)

Добавлено @ 11:58

Цитата(Marlik @ 4.9.2011, 14:56

)

Документации к тому-же вообще нет.

Нет документации к jQuery? Да ладно…

На русском-бы...

Это сообщение отредактировал(а) Marlik - 4.9.2011, 16:01

Amphiluke

Дата 4.9.2011, 16:39 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 17
Всего: 112

Цитата(Marlik @ 4.9.2011, 19:58

)

У меня не работает вот ссылка.

У вас на странице остался старый код.

Цитата(Marlik @ 4.9.2011, 19:58

)

Код


<script>
 $(document).ready(function(){
                $(".accordion h3:first").addClass("active");
                $(".accordion div:not(:first)").hide();

                $(".accordion h3").click(function(){

                    $(this).next("div").slideToggle("slow")
                    .siblings("div:visible").slideUp("slow");
                    $(this).toggleClass("active");
                    $(this).siblings("h3").removeClass("active");
                });

            });
</script>

Первый при клике разворачивает, второй — сворачивает после первого. Чему тут удивляться? smile

Удалите старый.

Marlik

Дата 4.9.2011, 22:17 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 212
Регистрация: 25.2.2007
Где: Рязань

Репутация: нет
Всего: нет

Спасибо, получилось вот так:

Код


<script>
 $(document).ready(function(){
                $(".accordion h3:first").addClass("active");
               $(".accordion > div:eq(0)").hide();
            });
</script>

Вроде все работает, это правильный код?

Это сообщение отредактировал(а) Marlik - 4.9.2011, 22:21

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »