DEMO

Question

我想要实现的是，当我单击“服务”时，应显示“子类别（嵌套的UI）”，默认情况下是隐藏的。此外，当我单击“服务”时，“服务”下的“仅”应该打开，而不是所有其他服务器一起打开。

我无法使用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>

Answer 2

将你的js更改为：

$('.sub').click(function() {
  $(this).parent().next("ul").toggle();
});

fiddle

Answer 3

将sub类设置为li项，而不是<a>标记：

<li class="sub"><a href="#">Services</a></li>

http://jsfiddle.net/jVfj5/10/

Answer 4

我在其周围放了div并给它ID

试试这个：

$(document).ready(function() {
    $("#nav ul li:not(:has(li.sub))").find("ul").hide().end().click(function(e) {
        if (this == e.target) {
            $(this).children('ul').slideToggle('fast');
        }
    });
});

切换内部无序列表

4 个答案:

DEMO