Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> jQuery - проблема в выпадающем меню 
V
    Опции темы
Noviy
Дата 31.10.2009, 23:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: нет
Доброго времени суток. Этот js код  должен был:
 - Скрывать подменю.
 - При наведение мыши на соответствующий пункт меню, показывать подменю.
 - Если курсор выходит за <div class="popup">, подменю должно скрываться.

А получаем, что при выходе курсора за 
Код

<li><a class="submenu_a" href="#">sub_1</a></li>

скрывается подменю.
:(
Код

<div id="menu">
    <table id="m">
        <tr>
            <td>
                 <a class="mainmenu"  href="#">1</a>
            </td>
            <td>
                <div class="selected"><a class="mainmenu_a" id="isDrop" href="#">2</a>
                    <div class="popup">
                    <ul>
                    <li><a class="submenu_a" href="#">sub_1</a></li>
                    <li><a class="submenu" href="#">sub_2</a></li>
                    <li><a class="submenu" href="#">sub_3</a></li>
                    <li><a class="submenu" href="#">sub_4</a></li>
                        </ul>
                    </div>
                </div>
         </td>
         <td>
             <a class="mainmenu"  href="#">3</a>
         </td>
         <td>
              <a class="mainmenu"  href="#">4</a>
         </td>
         <td>
             <a class="mainmenu"  href="#">5</a>
         </td>
         </tr>
    </table>
</div> 


Код

<script>
$(document).ready(function(){
    $(".popup").hide(); 
    $("#isDrop").mouseover(function(){
    $("div.popup").show();
    });
    $("div.selected div.popup").mouseout(function(){
    $("div.popup").hide();
    });
});
</script>
PM MAIL ICQ   Вверх
check
Дата 1.11.2009, 01:08 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: 23
Чтобы не бороться со всплытием события mouseout от ссылки подменю, лучше пользоваться методом hover, который обрабатывает событие 
только от элемента, указанного селектором и игнорирует всплывающие события от элементов внутри него.


Как-то так например:
Код

<script>
    $(document).ready(function() {
        $("#selected").hover(function(e) {
            $(this).find('ul').css('display','inline')
            },
            function(){ 
            $(this).find('ul').css('display','none')
            })
    });
</script>
<div id="menu">
    <table id="m">
        <tr>
            <td>
                 <a class="mainmenu"  href="#">1</a>
            </td>
            <td>
                <div id="selected"><a class="mainmenu_a" id="isDrop" href="#">2</a>
                    
                    <ul style="display:none">
                        <li><a class="submenu_a" href="#">sub_1</a></li>
                        <li><a class="submenu" href="#">sub_2</a></li>
                        <li><a class="submenu" href="#">sub_3</a></li>
                        <li><a class="submenu" href="#">sub_4</a></li>
                    </ul>
                  
                </div>
         </td>
         <td>
             <a class="mainmenu"  href="#">3</a>
         </td>
         <td>
              <a class="mainmenu"  href="#">4</a>
         </td>
         <td>
             <a class="mainmenu"  href="#">5</a>
         </td>
         </tr>
    </table>
</div> 

Вариант на скорую руку, но работает.
PM MAIL   Вверх
Noviy
Дата 1.11.2009, 12:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: нет
попробовал применить вышеуказаный скрипт. Просто отобразилось подменю, сразу после загрузки страницы, и не исчезало.
Можно ли привязаться к id="isDrop" ? если будет несколько подменю, будет проблематично выберать по "selected".
PM MAIL ICQ   Вверх
check
Дата 1.11.2009, 13:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: 23
Цитата(Noviy @  1.11.2009,  12:19 Найти цитируемый пост)
попробовал применить вышеуказаный скрипт. Просто отобразилось подменю, сразу после загрузки страницы, и не исчезало.
Обрати внимание, я скрипт вместе с вёрсткой запостил.  Всё работает.
Я в html прописал такой стиль <ul style="display:none">, за счет этого подменю скрывается и можно дальше оперировать свойством display.



Цитата(Noviy @  1.11.2009,  12:19 Найти цитируемый пост)
Можно ли привязаться к id="isDrop" ? если будет несколько подменю, будет проблематично выберать по "selected". 
Можно.
PM MAIL   Вверх
check
Дата 1.11.2009, 14:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: 23
С привязкой по isDrop:
Код

<script>
    $(document).ready(function() {
        $("#isDrop").parents('div:first').hover(
                        function(e) {
                $('ul', $(this)).css('display','inline')
            },
            function(){ 
                $('ul', $(this)).css('display','none')
            })
    });
</script>
<div id="menu">
    <table id="m">
        <tr>
            <td>
                 <a class="mainmenu"  href="#">1</a>
            </td>
            <td>
                <div class="selected"><a class="mainmenu_a" id="isDrop" href="#">2</a>
                    
                        <ul  style="display:none">
                            <li><a class="submenu_a" href="#">sub_1</a></li>
                            <li><a class="submenu" href="#">sub_2</a></li>
                            <li><a class="submenu" href="#">sub_3</a></li>
                            <li><a class="submenu" href="#">sub_4</a></li>
                        </ul>
                    
                </div>
         </td>
         <td>
             <a class="mainmenu"  href="#">3</a>
         </td>
         <td>
              <a class="mainmenu"  href="#">4</a>
         </td>
         <td>
             <a class="mainmenu"  href="#">5</a>
         </td>
         </tr>
    </table>
</div> 
Естественно, я предполагаю, что id="isDrop" единственный на странице, другие ссылки меню имеют другие id и ты знаешь, как их передать скрипту.  Или можно передать просто this.  В общем, ты задал конкретный вопрос, я на него ответил  smile  
PM MAIL   Вверх
Noviy
Дата 1.11.2009, 15:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: нет
спасибо
PM MAIL ICQ   Вверх
Dima85
Дата 6.1.2010, 00:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: нет
Всего: нет
Помогите пожалуйста решить похожую задачу: 
Код

<script>
    $(document).ready(function() {
        $("#menu a").hover(function(e) {
            $(this).append('<ul><li>Del</li><li>Rename</li></ul>')
            },
            function(){ 
            //Вопрос в том. Как удалять вставленный ul меню?
            })
    });
</script>

<div id="menu">
    <a href="#">df2</a>
    <a href="#">dsf2</a>
    <a href="#">dsf2</a>
    <a href="#">2dsf</a>
    <a href="#">2gs</a>
</div>


Это сообщение отредактировал(а) Dima85 - 6.1.2010, 00:51
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Применение библиотек | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0817 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.