我有一个 wordpress 网站,我正在尝试创建一个自定义菜单。我需要它做的是,如果它有一个子“ul”,则将父级视为“手风琴头”,目前它可以工作,但最多 2 个级别,如果超过 2 个,则隐藏其余的。有什么帮助吗?
HTML:
<ul id="menu-interno" class="menu">
<li id="menu-item-629" class=""><a href="#">Home</a></li>
<li id="menu-item-635" class=""><a href="http://#">Mujeres</a>
<ul class="sub-menu">
<li id="menu-item-636" class=""><a href="#">Xiomi</a>
<ul class="sub-menu">
<li id="menu-item-637" class="">
<a href="#">Xiomi – Pink Candy</a>
</li>
<li id="menu-item-638">
<a href="#">Xiomi – Electric City</a>
</li>
<li id="menu-item-639">
<a href="#">Xiomi – Cupcake Girl</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS:
#menu-interno{
float: left;
width: 280px;
/*border-top: 1px solid #999;
border-right: 1px solid #999;
border-left: 1px solid #999;*/
}
#menu-interno li a {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
color:#000 !important;
}
#menu-interno li ul {
display: none; // used to hide sub-menus
margin: 4px 0 15px;
}
#menu-interno li ul li a {
font-size: 11px;
font-weight: normal;
color:#000 !important;
}
查询:
$(document).ready(function () {
$('#menu-interno > li > a').click(function(){
if ($(this).attr('class') != 'active'){
$('#menu-interno li ul').slideUp();
$(this).next().slideToggle();
$('#menu-interno li a').removeClass('active');
$(this).addClass('active');
}
});
});