Rails jquery下拉菜单用于多个菜单

Rails jquery dropdown menu for multiple menus

本文关键字：菜单 用于 jquery 下拉菜单 Rails      更新时间：2023-09-26

我对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函数，也不知道该如何处理只为#dropdown编写的CSS。

试试这个：

$(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 中不起作用

相关文章：