使jquery水平子菜单父链接激活

Question

当我设置顶部锂标签之一，以激活子菜单显示。但我希望它只在子菜单中的某个链接处于活动状态时显示。 我试了几次点击和添加组合，但似乎没有人工作。

这里是CSS

ul.catnav { 
    float: left; 
    list-style: none outside none; 
    margin: 0pt; 
    padding: 0pt 5px; 
    position: relative; 
    width: 620px; 
} 

ul.catnav li { 
    float: left; 
    display: block; 
    margin: 0pt; 
    padding: 0pt 0pt 10px; 
} 

.home a:link, .home a:visited { color: tomato;} 
.web a:link, .web a:visited { color: #FFA73F;} 
.zikula a:link, .zikula a:visited { color: #DBC300;} 
.blog a:link, .blog a:visited { color: #83CF33;} 
.resources a:link, .resources a:visited {color: #6BBBBF;} 
.contact a:link, .contact a:visited { color: #999;} 

ul.catnav li a { 
    padding: 5px 15px 15px; 
    position: relative; 
    text-decoration: none; 
    /*z-index: 99999; */ 
    text-transform:uppercase; 
} 

ul.catnav li ul.sub { 
    border-radius: 5px 5px 5px 5px; 
    background: none repeat scroll 0% 0% rgb(51, 51, 51); 
    border-width: 1px; 
    border-style: solid; 
    border-color: rgb(0, 0, 0) rgb(51, 51, 51) rgb(51, 51, 51) rgb(0, 0, 0); 
    display: none; 
    float: left; 
    left: 0pt; 
    list-style: none outside none; 
    margin: 0pt; 
    padding: 5px 15px; 
    position: absolute; 
    top: 33px; 
    width: 590px; 
    z-index: 0; 
} 

ul.catnav li.active ul.sub a { 
background: none repeat scroll 0% 0% transparent; 
} 

ul.catnav li ul.sub li { 
background: none repeat scroll 0% 0% transparent; 
float: left; 
margin: 0pt; 
padding: 0pt; 
} 

ul.catnav li.active a, ul.catnav li:hover a { 
background: url('blognav_sub_arrow.gif') no-repeat scroll center bottom transparent; 
color: rgb(255, 255, 255); 
} 

ul.catnav li ul.sub li.home a:link, ul.catnav li ul.sub li.home a:visited {color: tomato;} 
ul.catnav li ul.sub li.home a:hover { color: #999; } 

ul.catnav li ul.sub li.web a:link, ul.catnav li ul.sub li.web a:visited {color: #FFA73F;} 
ul.catnav li ul.sub li.web a:hover {color: #999;} 
ul.catnav li ul.sub li.web a:active {color: #fff;} 

ul.catnav li ul.sub li.zikula a:link, ul.catnav li ul.sub li.zikula a:visited {color: #DBC300;} 
ul.catnav li ul.sub li.zikula a:hover {color: #999;} 
ul.catnav li ul.sub li.zikula a:active {color: #fff;} 

ul.catnav li ul.sub li.blog a:link, ul.catnav li ul.sub li.blog a:visited {color: #83CF33;} 
ul.catnav li ul.sub li.blog a:hover {color: #999;} 
ul.catnav li ul.sub li.blog a:active {color: #fff;} 

ul.catnav li ul.sub li.resources a:link, ul.catnav li ul.sub li.resources a:visited {color: #6BBBBF;} 
ul.catnav li ul.sub li.resources a:hover {color: #999;} 
ul.catnav li ul.sub li.resources a:active {color: #fff;} 

ul.catnav li ul.sub li.contact a:link, ul.catnav li ul.sub li.contact a:visited {color: #999;} 
ul.catnav li ul.sub li.contact a:hover {color: #ccc;} 
ul.catnav li ul.sub li.contact a:active {color: #fff;} 

ul.catnav li ul.sub li a { 
background: none repeat scroll 0% 0% rgb(51, 51, 51); 
padding: 8px 10px; 
text-transform:none; 
} 

ul.catnav li ul.sub li a:hover { 
background: none repeat scroll 0% 0% rgb(51, 51, 51); 
} 

ul.catnav li a:hover { color: rgb(255, 255, 255); } 

ul.catnav li:hover ul.sub, 
ul.catnav li.active ul.sub { display: block; } 

ul.catnav li ul.sub li.right, 
ul.catnav li.blog ul.sub li, 
ul.catnav li.contact ul.sub li, 
ul.catnav li.resources ul.sub li { float: right; } 

而且这里的HTML

<ul class="catnav"> 
       <li class="home"><a href="#">Home</a></li> 
       <li class="web"><a href="#">Webstudio</a> 
        <ul class="sub"> 
         <li class="web"><a href="#" target="_blank">HTML/CSS</a></li> 
         <li class="web"><a href="#">jQuery</a></li> 
         <li class="web"><a href="#">SEO Tips</a></li> 
         <li class="web"><a href="#">Design</a></li> 
         <li class="web"><a href="#">Beginner</a></li> 
         <li class="web"><a href="#">Intermediate</a></li> 
        </ul> 
       </li> 
       <li class="zikula"><a href="#">Zikula CMS</a> 
        <ul class="sub"> 
         <li class="zikula"><a href="#">Learning Advice</a></li> 
         <li class="zikula"><a href="#">Random Thoughts</a></li>       
        </ul> 
       </li> 
       <li class="blog"><a href="#">Personal</a> 
        <ul class="sub"> 
         <li class="blog"><a href="#">News</a></li> 
         <li class="blog"><a href="#">test2</a></li> 
         <li class="blog"><a href="#">test3</a></li> 
        </ul> 
       </li> 
       <li class="resources"><a href="#">Resources</a> 
        <ul class="sub"> 
         <li class="resources"><a href="#">Useful Plugins/Apps</a></li> 
         <li class="resources"><a href="#">Downloads</a></li> 
        </ul> 
       </li> 
       <li class="contact"><a href="#">Contact</a> 
        <ul class="sub"> 
         <li class="contact"><a href="#">Contact Info</a></li> 
         <li class="contact"><a href="#">Contact form</a></li> 
        </ul> 
       </li> 
      </ul> 

这里的jQuery：

$(document).ready(function() { 
    //On Click Event 
    $("ul.catnav li ul.sub li a").click(function() { 

     $("ul.catnav li").removeClass("active"); //Remove any "active" class 
     $(this).find("ul.catnav li").addClass("active"); //Add "active" class to selected tab 
     $("ul.catnav li").show(); //show all content 
    }); 
}); 

Answer 1

.find()搜索的后代，你必须寻找祖先。所以请尝试.parents()而不是