自定义wordpress垂直手风琴菜单

时间:2013-02-01 05:07:35

标签: jquery wordpress menu accordion

我有一个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 &#8211; Pink Candy</a>
        </li>
        <li id="menu-item-638">
            <a href="#">Xiomi &#8211; Electric City</a>
        </li>
        <li id="menu-item-639">
        <a href="#">Xiomi &#8211; 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;
}

JQuery的:

$(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');
     }
   });
});

1 个答案:

答案 0 :(得分:0)

不要使用ul li作为选择器,使用不同的类。