Question

JsFiddle：http://jsfiddle.net/L4r3j/

我有一个工作的jQuery下拉列表，最终将重定向到我创建的所有页面。但是，我想对此进行扩展，并从悬停项目（最好是侧面）中弹出一个列表，以在该子标题上显示更多选项。因此，一旦第一个主题悬停在下拉菜单上就会展开，然后一旦主题在下拉菜单中悬停，菜单会扩展到一边，有更多选项。

继承我目前的代码：

HTML：

<div class="nav">
    <ul class="navigation">
        <li><a href="#">Home</a></li>
        <li><a href="#">Galaxy S4</a>
            <ul>
                <li><a href="#">Verizon</a></li>
                <li><a href="#">ATT</a></li>
                <li><a href="#">Sprint</a></li>
                <li><a href="#">T-Mobile</a></li>
                <li><a href="#">International</a></li>
            </ul>
        </li>
    </ul>
</div>

JavaScript的：

$(document).ready(function () 
{
    $('.navigation li').hover(
        function () 
        {
            $('ul', this).fadeIn(); 
        },
        function () 
        {
            $('ul', this).fadeOut(); 
        });
});

Answer 1

你宁愿有一些只影响子菜单的东西，我的方法是给子菜单一个类名，然后只对那个hover事件绑定，但是对子进行更改{ {1}}。

我给每个主菜单项一个sub-menu类属性和一个menu-item给孩子们没有太多改变你的javascript，只是在你用来绑定你的元素的选择器上活动到。

我们的基本结构：

sub-menu

Menu: 1. Item 1 (no sub-menu) 2. Item 2 (has a sub-menu) a. sub-menu item 1 (no sub-menu) b. sub-menu item 2 (has a sub-menu) i. sub-sub-menu item 1 ii. sub-sub-menu item 2 3. Item 3 (has a sub-menu) a. sub-menu item 1 (no sub-menu) b. sub-menu item 2 (has a sub-menu)（简体）

HTML

<ul id="top-level-menu"> <li class='menu-item'> No Sub Menu </li> <li class='menu-item'> Nested Sub Menu <ul class='sub-menu'> <li class='menu-item'> Nested Menu <ul class='sub-menu'> <li> Nested </li> <li> Sub </li> <li> Menu </li> </ul> </li> <li> no nested list </li> </ul> </li> <li class='menu-item'> Regular Sub menu <ul class='sub-menu'> <li> Sub item 1 </li> <li> Sub item 2 </li> </ul> </li> </ul>部分的存在只是为了隐藏初始化时的CSS，以及在元素右侧显示它们的样式，后者可以根据需要进行设置。

.sub-menu

CSS

现在对于.sub-menu { display: none; } /* optional and replaceable with similar logic for display */ .show-sub-menu-on-right { position: absolute; left: 100% !important; /* make sure to override inherited positioning*/ top: 0%; }我们只需要将绑定应用于正确的元素。我们希望jQuery向他们的班级li.menu-item的孩子展示，所以我们设置了我们的功能来做到这一点。

sub-menu

javascript/jQuery

我相信这是你追求的目标吗？

以下是适用于您案例的上述逻辑。

修改以下是jsfiddle，根据您提供的内容进行修改，显示您想要的内容，我还添加了一个$('.menu-item').hover( function() { var subMenu = $(this).children('.sub-menu'); $(subMenu).fadeIn() }, function() { var subMenu = $(this).children('.sub-menu'); $(subMenu).fadeOut(); } )类CSS，仅用于视觉效果。

even more updated jsfiddle with all the fixings

编辑2

Example with sub-sub-menus以及它如何应用于嵌套菜单。

编辑3

Example with slide out and down menus

我添加的真实代码是在javascript中，我把它放在这里供参考。主要是将子菜单的子项.show-sub-menu-on-right切换为.menu-item

基本上逻辑是相似的。与以前一样，我们只声明一个类sub-menu-item，并为这些元素提供.sub-menu-item行为的不同绑定。我们希望得到所有的孩子hover，然后我们在列表中断言一些东西，因为现在动画在我们手中。

li

如果您正在寻找一种处理此问题的通用方法，您可以在这里找到一个骨架：

HTML

$('.sub-menu-item').hover( // When mouse enters the .navigation element function () { //Fade in the navigation submenu var subMenu = $(this).children('.sub-menu'); // Get the sub menu if (!subMenu) { return; // if it doesn't have a sub menu quit } var subMenuItems = $(subMenu).children('li'); // get all the sub menu items // Get the max width we need to expand the menu to var maxWidth = 0; for (var i = 0; i < subMenuItems.length; i++) { if ( maxWidth < $(subMenuItems[i]).width() ) { maxWidth = $(subMenuItems[i]).width(); } } var firstItem = $(subMenuItems).first(); // get the first item var restOfItems = subMenuItems.slice(1); // slice of the rest. $(firstItem).width(0); // make sure the element has width 0 so we can animate it $(subMenu).show(); // make the submenu ul itself is visible $(subMenuItems).each(function () { // Make sure all the items in the ul $(this).css('display', 'none'); // are not yet visible }); $(firstItem).show(); // make the first item visible $(firstItem).animate({ // animate the first item growing width:maxWidth+"px", },function() { // function to execute after animation is complete $(restOfItems).slideDown(); // slide down the rest of the list }); }, // When mouse leaves the .navigation element function () { //Fade out the navigation submenu var subMenu = $(this).children('.sub-menu'); $(subMenu).fadeOut(); // fadeOut will hide the sub cat menu } );

的javascript：

<ul class='menu'> <li class='menu-item-with-animation-style-1'> <ul class='sub-menu'> <li class='menu-item-with-animation-style-1'> <ul class='sub-menu'> <li class='menu-item-with-animation-style-1'>A</li> <li class='menu-item-with-animation-style-4'>B</li> <li class='menu-item-with-animation-style-7'>C</li> </ul> </li> <li class='menu-item-with-animation-style-4'>B</li> <li class='menu-item-with-animation-style-7'>C</li> </ul> </li> <li class='menu-item-with-animation-style-2'> <ul class='sub-menu'> <li class='menu-item-with-animation-style-1'> <ul> <li>AA</li> </ul> </li> <li class='menu-item-with-animation-style-1'>B</li> <li class='menu-item-with-animation-style-1'>C</li> </ul> </li> <li class='menu-item-with-animation-style-3'> <ul class='sub-menu'> <li>A</li> <li>B</li> <li>C</li> </ul> </li> </ul>

查看＆＃34;混合包＆＃34;中的最后一个菜单项（＆＃34;国际＆＃34;）下拉Example of even more extendability

Answer 2

编辑：

这是标记

<nav>
    <ul>
        <li><a href="#">Nav 1</a></li>
        <li><a href="#">Nav 2</a></li>
        <li class="dropdown">
            <a href="#">Nav 3</a>
            <ul class="sub-menu">
                <li><a href="#">Nav 3.1</a></li>
                ...
                <li class="dropdown">
                    <a href="#">Nav 3.4</a>
                    <ul class="sub-menu">
                        <li><a href="#">Nav 3.4.1</a></li>
                        <li class="dropdown">
                            <a href="#">Nav 3.4.2</a>
                            <ul class="sub-menu">
                                <li><a href="#">Nav 3.4.2.1</a></li>
                                ...
                            </ul>
                        </li>
                        ...
                    </ul>
                </li>
                <li><a href="#">Nav 3.5</a></li>
            </ul>
        </li>
        ...
    </ul>
</nav>

这是JS

$(document).ready(function() {
    $( '.dropdown' ).hover(
        function(){
            $(this).children('.sub-menu').slideDown(200);
        },
        function(){
            $(this).children('.sub-menu').slideUp(200);
        }
    );
}); // end ready

如何使用更多子标签扩展下拉列表？

2 个答案: