1

我需要一些帮助来弄清楚如何重新编码以下弹出式菜单功能：

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();

您可以在此处查看它的运行情况，看看它现在做了什么。一旦你看到它在行动，你就会发现一旦你选择了一个子 LI，我就无法让父 LI 保持“粘性”。例如：Job Aides > Contacts > Approved Brokers ... 我的意思是当子 LI 被鼠标悬停时，父 LI（Job Aides and Contacts）不会保持悬停状态（Approved Brokers）。

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

在此处输入图像描述

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

更新

下面是我的 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;
}

谢谢，

伯克利

4

1 回答 1

0

我终于得到了我想要的工作方式……基于 Stack Overflow 的人们帮助我指出了正确的方向这一事实：需要调整的是 CSS，而不是 jQuery 函数。我最终重新学习了 CSS 选择器以及如何使用“大于”符号（“>”）将允许 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 选择器，

伯克利

于 2012-08-21T15:17:56.217 回答