自定义手风琴使用jQuery

我想创建一个使用jquery的自定义手风琴，已经阅读了很多关于stackoverflow的解决方案，但我似乎无法让我的工作，我相信它必须处理。兄弟姐妹。总之，这里是我的html代码：自定义手风琴使用jQuery

<div class="menu"> 
    <ul> 
     <li class="current"> 
      <a href="#" class="current"><img class="icon" src=""/>Dashboard</a> 
     </li> 
     <li> 
      <a href="#"><img class="icon" src=""/>Mail</a> 
      <ul class="submenu"> 
       <li> 
        <a href="#" title="">Write New</a> 
       </li> 
       <li> 
        <a href="#" title="">Junk</a> 
       </li> 
       <li> 
        <a href="#" title="">Deleted</a> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="#"><img class="icon" src=""assets/colors.png""/>Child</a> 
      <ul class="submenu"> 
       <li> 
        <a href="#">Child 1</a> 
       </li> 
       <li> 
        <a href="#">Child 2</a> 
       </li> 
       <li> 
        <a href="#">Child 3</a> 
       </li> 
      </ul> 
     </li> 
     <li> 
      <a href="#"><img class="icon" src=""/>Grid</a> 
     </li> 
     <li> 
      <a href="#"><img class="icon" src=""/>Class</a> 
     </li> 
    </ul> 
</div>

这里是我的jQuery代码：

$('.menu ul li a').click(function() { 

    $(this).next('.submenu').siblings('li').slideUp(); 
    $(this).next('.submenu').slideToggle(); 

});

菜单切换开放罚款，但是当我打开一个，其他人将无法关闭。

感谢您的帮助！

来源

2011-11-18 d123

它不会关闭的原因是因为兄弟姐妹会看到同一级别。因此在LI元素中，它会查找更多LI元素。你不是兄弟姐妹LI的父母，并关闭那里的孩子.submenu。

试试这个：

$(this).parent().siblings('li').find('.submenu').slideUp();

来源

2011-11-18 08:56:42 Niels

嗨Niels，甜蜜的工作！谢谢。在父母和兄弟姐妹面前破坏了我的大脑 – d123

你试图关闭你即将对一个当前打开打开一个

$（“菜单UL李一。”） .click（function（）{

$('.current').removeClass('current').next('.submenu').siblings('li').slideUp(); 
$(this).addClass('current').next('.submenu').slideToggle();

}）;

来源

2011-11-18 08:58:54

整个代码将是

$(this).parent().siblings('li').find('.submenu').slideUp(); 
$(this).next('.submenu').slideDown();

只是改变了切换到了slideDown在最后一行....

我有一个疑问，每一个锚将使用用户选择可点击......可我们使它只有一级锚点击。任何想法？

来源

2011-11-18 09:59:59 Neelesh

自定义手风琴使用jQuery

回答

相关问题