jquery - 切换内部无序列表

Question

检查这个 fiddle http://jsfiddle.net/jVfj5/

我想要实现的是，当我单击“服务”时，子类别(嵌套的 Ul)应该显示，默认情况下是隐藏的。此外，当我单击服务时，只有服务下的 ul 应该打开，而不是所有其他 ul。

我无法使用 jquery 完成这项工作。

body
{
    background:rgba(115,115,115,1);`
}
}
ul.nav
{
    text-align:right;

}
ul.nav ul
{
display:none;   
}
ul.nav ul li{
background:rgba(255,255,255,0.1);
border-bottom:none;

}
ul.nav ul li:hover{
border-bottom:none;
background:rgba(255,255,255,0.2);
}

ul.nav a { 
    cursor: pointer; 
    display: block; 
    color: white; 
    line-height: 30px; 
    text-decoration:none; 
}
ul.nav li {
    text-transform:uppercase;
    margin-top:1.5%;
    padding-top:3%;
    padding-bottom:1%;
    padding-right:3%;
    background:#0c1026;
    border-bottom:5px solid green;

}
ul.nav li:hover{
border-bottom:5px solid red;
}

HTML

<ul class="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#" class="sub">Services</a></li>
                    <ul>
                      <li><a href="#">SubMenu1</a></li>
                      <li><a href="#">SubMenu2</a></li>
                    </ul>  
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Our Library</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>

Answer 1

当前的 Jquery 工作正常如果您更正 HTML 结构错误

JSfiddle Demo

HTML

<ul class="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#" class="sub">Services</a>
                    <ul>
                      <li><a href="#">SubMenu1</a></li>
                      <li><a href="#">SubMenu2</a></li>
                    </ul>  
                </li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Our Library</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>