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的{{1}}来执行此操作：

jQuery

但它不适用于旧版本的Internet Explorer

多个菜单的Rails jquery下拉菜单

1 个答案: