Rails JQuery выпадающее меню для нескольких меню

Question

Я очень новичок в jquery, довольно глуп, когда дело доходит до него (и JavaScript).После многих часов поисков я нашел очень простой способ создать выпадающее меню.Это работает найти, за исключением того, что это будет работать только для одного родительского элемента, мне нужно иметь возможность создать более одного выпадающего меню с ним, поэтому я надеялся, что кто-то может указать мне правильное направление, чтобы отредактировать код, чтобы он работал.

Вот что у меня есть:

Код jquery:

$(document).ready(function () {
    $('#dropdown').hover(         
        function () {
            //change the background of parent menu              
            $('#dropdown li a.parent').addClass('hover');

            //display the submenu
            $('#dropdown ul.children').show();                 
        },

        function () { 
            //change the background of parent menu
            $('#dropdown li a.parent').removeClass('hover');            

            //display the submenu
            $('#dropdown ul.children').hide();                 
        }         
    );         
});

Разметка меню:

<ul id="dropdown">
    <li><a href="#" class="parent">Searches</a> 
        <ul class="children">
            <li><%= link_to 'search1', path1 %></li>
            <li><%= link_to 'search2', path2 %></li>
            ...
        </ul>
    </li>

    <li><a href="#" class="parent">UPCs</a> 
        <ul class="children">
            <li><%= link_to 'search1', path1 %></li>
            <li><%= link_to 'search2', path2 %></li>
        </ul>
    </li>
</ul> <!-- id dropdown end tag -->

Прямо сейчас, наведя курсор на любой элемент (Поиск или UPC) создает одно меню, конечно, со всеми детьми.Идея состоит в том, чтобы иметь возможность производить детей под каждого родителя.

Спасибо.

PS Если у кого-нибудь есть простой , лучший способ сделать это (возможно, плагин, который действительно работает), я был бы рад услышать об этом какЧто ж.Мне действительно нужно что-то простое, я не хочу изучать javascript для этого (это одна из причин, по которой я ушел от PHP и в первую очередь к Rails).

Я понимаю, что простым способом было бы создать 2 (или более) разных <ul id="dropdown2"> и т. Д. Списков, но я понятия не имею, как передать правильный в функцию jquery или что делать сCSS, который написан только для #dropdown.

Answer 1

Попробуйте:

$(document).ready(function () {
    $('.dropdown li').hover(         
        function () {             
            $(this).addClass('hover');
            $('> ul.children', $(this)).show();                 
        },

        function () { 
            $(this).removeClass('hover');            
            $('> ul.children', $(this)).hide();                
        }         
    );         
});

Это будет работать для каждого элемента с классом dropdown.

Но вы могли бы сделать это, используя CSS без jQuery:

.dropdown li ul {
    display: none;
}
.dropdown li:hover > ul {
    display: block;
}

Но это не будет работать в старой версии Internet Explorer