VPF::аккордион - Форум программистов

krb

Дата 31.5.2012, 19:11 (ссылка)

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

Загрузка ...

Шустрый

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

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

есть меню акордион, изображения раскрываются при наведении

Код


 $(function() {
                $('#accordion > li').hover(
                    function () {
                        var $this = $(this);
                        $this.stop().animate({'width':'354px'},1000);
                        $('.heading',$this).stop(true,true).fadeOut();
                        $('.bgDescription',$this).stop(true,true).slideDown(500);
                        $('.description',$this).stop(true,true).fadeIn();
                    },
                    function () {
                        var $this = $(this);
                        $this.stop().animate({'width':'73px'},1000);
                        $('.heading',$this).stop(true,true).fadeIn();
                        $('.description',$this).stop(true,true).fadeOut(500);
                        $('.bgDescription',$this).stop(true,true).slideUp(700);
                    }
                );
            });

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

--------------------

ksnk

Дата 31.5.2012, 19:19 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Код


$('#accordion > li:first').trigger('mouseover');

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

krb

Дата 31.5.2012, 19:54 (ссылка)

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

Загрузка ...

Шустрый

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

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

что то у меня не выходит(

--------------------

Aliance

Дата 5.6.2012, 09:55 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

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

Я думаю это можно сделать стилями, не вызывая событие.
Покажите код целиком.

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

krb

Дата 5.6.2012, 16:41 (ссылка)

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

Загрузка ...

Шустрый

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

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

Код


<script type="text/javascript">
            $(function() {
                $('#accordion > li').hover(
                    function () {
                        var $this = $(this);
                        $this.stop().animate({'width':'354px'},1000);
                        $('.heading',$this).stop(true,true).fadeOut();
                        $('.bgDescription',$this).stop(true,true).slideDown(500);
                        $('.description',$this).stop(true,true).fadeIn();
                    },
                    function () {
                        var $this = $(this);                        
                        $this.stop().animate({'width':'73px'},1000);
                        $('.heading',$this).stop(true,true).fadeIn();
                        $('.description',$this).stop(true,true).fadeOut(500);
                        $('.bgDescription',$this).stop(true,true).slideUp(700);
                    }
                );
            });
        </script>

Код


<ul class="accordion" id="accordion">
                <li class="bg4">

                    <div class="heading"><div><img src="images/p18.png" /></div></div>

                    <div class="bgDescription"></div>

                    <div class="description">

                    

                        <h2><img src="images/gastro.png" />гастроэнтерология</h2>

                        <p></p>

                        <a href="#"></a>

                    </div>



                </li>

                <li class="bg5">

                    <div class="heading"><div><img src="images/p17.png" /></div></div>

                    <div class="bgDescription"></div>

                    <div class="description">

                        <h2><img src="images/urolog.png" />урология</h2>

                        <p></p>

                        <a href="#"></a>

                    </div>

                </li>



                <li class="bg7">

                    <div class="heading"><div><img src="images/p16.png" /></div></div>

                    <div class="bgDescription"></div>

                    <div class="description">

                        <h2><img src="images/onkolog.png" />онкология</h2>

                        <p></p>

                        <a href="#"></a>

                    </div>



                </li>

                <li class="bg8" id="one">

                    <div class="heading"><div><img src="images/p15.png" /></div></div>

                    <div class="bgDescription"></div>

                    <div class="description">

                        <h2><img src="images/kardiolog.png" />кардиология и ангиология</h2>

                        <p></p>

                        <a href="#"></a>

                    </div>

                </li>

                                <li class="bg6">

                    <div class="heading"><div><img src="images/p14.png" /></div></div>

                    <div class="bgDescription"></div>

                    <div class="description">

                        <h2><img src="images/dermayolog.png" />дерматология</h2>

                        <p></p>

                        <a href="#"></a>

                    </div>



                </li>

                  <li class="bg2">

                    <div class="heading"><div><img src="images/p13.png" /></div></div>

                    <div class="bgDescription"></div>

                    <div class="description">

                        <h2><img src="images/ginekolog.png" />гинекология</h2>

                        <p></p>

                        <a href="#"></a>

                    </div>



                </li>

                

                 <li class="bg3">

                    <div class="heading"><div><img src="images/p12.png" /></div></div>

                    <div class="bgDescription"></div>

                    <div class="description">

                        <h2><img src="images/orto.png" />ортопедия</h2>

                        <p></p>

                        <a href="#"></a>

                    </div>



                </li>

                

                <li class="bg1">

                    <div class="heading">

                    <div><img src="images/p11.png" /></div>

                    </div>

                    <div class="bgDescription"></div>                    

                    <div class="description">

                        <h2><img src="images/plastic.png" />пластическая хирургия</h2>

                        <p></p>

                        <a href="#"></a>

                    </div>

                </li>

            </ul>

--------------------

Aliance

Дата 6.6.2012, 09:57 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

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

Это решает проблему?

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

krb

Дата 6.6.2012, 13:44 (ссылка)

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

Загрузка ...

Шустрый

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

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

нет, так же.

--------------------

Aliance

Дата 7.6.2012, 09:14 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

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

Тогда я видимо вопроса не понял, т.к. без приведенных вами стилей у меня по умолчанию открыты все меню. Я подставил сам стили, чтобы были закрыты все, кроме первого. Если это не решает проблему - может быть набросаете полный пример того, что есть сейчас (на сайте jsfiddle) и объясните чего хотите добиться еще раз?

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

krb

Дата 8.6.2012, 18:07 (ссылка)

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

Загрузка ...

Шустрый

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

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

ок

--------------------

krb

Дата 8.6.2012, 19:16 (ссылка)

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

Загрузка ...

Шустрый

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

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

http://jsfiddle.net/XGSeV/1/ - вот так оно сейчас,

Добавлено через 1 минуту и 11 секунд
хотелось бы что бы был раскрыт пункт по середине Кардиология...

--------------------

ksnk

Дата 8.6.2012, 19:55 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Код


$('#accordion > li.bg8').trigger('mouseover');

Это сообщение отредактировал(а) ksnk - 8.6.2012, 19:56

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

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