Question

我想帮助找出如何重新编写以下弹出菜单功能的代码：

var site = function() {
    this.navLi = $('#dnoa_nav li ul li').children('ul').hide().end();
    this.init();
};

site.prototype = {  
    init : function() {
        this.setMenu();
    },

    setMenu : function() {
        $.each(this.navLi, function() {
            if ( $(this).children('ul')[0] ) {
                $(this)
                .append('<span />')
                .children('span')
                .addClass('hasChildren')
            }
        });

        this.navLi.hover(function() {
            $(this).find('> ul').stop(true, true).slideDown('fast');
            },
            function() {
            $(this).find('> ul').stop(true, true).hide();       
        });
    }
}

new site();

您可以在行动here中看到它，看看它现在做了什么。一旦你看到它在行动，你会发现，一旦你选择了一个孩子LI，我就无法让父母LI保持“粘性”。例如：工作助理＆gt; 通讯录＆gt; 经批准的经纪人 ......我的意思是，父母LI（工作助理和联系人）不会处于悬停状态当孩子LI被盯上时（批准的经纪人）。

我希望脚本做的是在选择子LI时将父LI保持在悬停状态。看起来像这样：

enter image description here

关于我可以在上面粘贴的功能中进行调整的任何想法？非常感谢你！

的更新 的

下面是我的CSS的副本（我希望我没有弄乱）：

/* DNoA Nav menu */
.hasChildren {
position: absolute;
width: 11px; height: 24px;
background-image: url('/test/img/page/bkgd_navigation_subcell_hint.gif');
right : 0;
bottom: 0;
}

#dnoa_nav {
float: left;
margin: 0;
padding-top: 3px;
padding-left: 19px;
}

#dnoa_nav li a, #dnoa_nav li {
float: left;
}

#dnoa_nav li {
list-style: none;
position: relative;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.3px;
}

#dnoa_nav li a {
padding: 17px 16px;
text-decoration: none;
color: white;
}

#dnoa_nav li:hover a {
background-image: url('/test/img/page/bkgd_navigation_cell.jpg');
background-repeat: repeat;
}

/* DNoA Nav submenu */
#dnoa_nav li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0;
margin: 0;
}

#dnoa_nav li:hover > ul {
display: block;
}

#dnoa_nav li ul li {
_display: inline; /* for IE6 */
}

#dnoa_nav li ul li a {
background: #eeeeee;
padding-top: 8px;
padding-bottom: 10px;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
width: 175px;
font-weight: normal;
color: #005CA9;
display: block;
}

#dnoa_nav li ul li, #dnoa_nav li ul li a {
float: none;
background-image: none !important;
}

#dnoa_nav li ul li:hover a {
background: #005ca9;
background-image: url('/test/img/page/bkgd_navigation_subcell_over.gif') !important;
background-repeat: repeat;
color: #FFFFFF;
}

/* DNoA Nav subsubmenu */
#dnoa_nav li ul li ul {
display: none;
position: absolute;
left: 93%;
top: 7px;
padding: 0;
margin: 0;
border-top: 1px solid #CCCCCC;
z-index: 9999;
}

#dnoa_nav li ul li:hover > ul {
display: block;
}

#dnoa_nav li ul li ul li {
_display: inline; /* for IE6 */
}

#dnoa_nav li ul li ul li a {
background: #f8f8f8;
padding-top: 8px;
padding-bottom: 10px;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
width: 175px;
font-weight: normal;
color: #005CA9;
display: block;
}

#dnoa_nav li ul li ul li, #dnoa_nav li ul li ul li a {
float: none;
background-image: none !important;
}

#dnoa_nav li ul li ul li:hover a {
background: #005ca9;
background-image: url('/test/img/page/bkgd_navigation_subcell_over.gif') !important;
background-repeat: repeat;
color: #FFFFFF;
}

谢谢，

Berklie

Answer 1

我终于得到了我想要工作的东西...基于Stack Overflow人帮助指出我正确方向的事实：需要调整的是CSS，而不是jQuery函数。我最后重新学习了CSS选择器以及如何使用“大于”符号（“＆gt;”）将允许CSS仅直接影响父UL的直接子LI ...而不是级联到每个其他孩子LI和UL（当我设计最顶级的UL和LI时，这是我遇到的问题）。因此，编辑这些语句以使其有效：

#dnoa_nav li:hover a {
background-image: url('/test/img/page/bkgd_navigation_cell.jpg');
background-repeat: repeat;
}

编辑为：

#dnoa_nav li:hover > a {
background-image: url('/test/img/page/bkgd_navigation_cell.jpg');
background-repeat: repeat;
}

而且：

#dnoa_nav li ul li:hover a {
background: #005ca9;
background-image: url('/test/img/page/bkgd_navigation_subcell_over.gif');
background-repeat: repeat;
color: #FFFFFF;
}

编辑为：

#dnoa_nav li ul li:hover > a {
background: #005ca9;
background-image: url('/test/img/page/bkgd_navigation_subcell_over.gif');
background-repeat: repeat;
color: #FFFFFF;
}

再次感谢您带领我学习CSS选择器，

Berklie

重新编写飞出菜单功能，使父母LI的“粘性”

1 个答案: