Question

当我将其中一个顶级li标签设置为活动时，子菜单正在显示。但我希望它只显示子菜单中的一个链接是否处于活动状态。我已经尝试过几次点击和添加类组合，但似乎没有人工作。

这是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()

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

1 个答案: