点击展开会导致折叠其他已打开的项目？

Question

当我点击菜单项时，我希望只展开该项目，其余部分将会崩溃。

示例：我点击第1项展开它，然后点击第2项。因此，在这种情况下，第1项将自行折叠。

HTML

<ul class="footernav">
  <li>
    <a href="javascript:;" class="topToggle">Item 1</a>
    <div class="typeToggle typeCont">
    Link area one
    </div>
  </li>
  <li>
    <a href="javascript:;" class="topToggle">Item 2</a>
    <div class="typeToggle filterCont">Link area two</div>
  </li>
</ul>

Jquery的

$(document).ready(function(){ 
  $(".topToggle").click( function () {  
   $(this).parent().children('.typeToggle').slideToggle();
  });
});

FIDDLE

Answer 1

您可以在slideUp()具体.typeToggles之前slideToggle() $(".topToggle").click(function () { $(".typeToggle").slideUp(); $(this).parent().children('.typeToggle').slideToggle(); }); 。{/ p>

{{1}}

如果您单击已经展开的项目，这将导致向上/向下移动，但如果您愿意，可以进行一些检查以停止。

<强> Example fiddle

---

编辑：

这就是所谓的手风琴，可以在网上找到许多示例和插件。 jQuery UI提供了这个功能，你可以看到它here;如果您不想重新创建功能，那么通常 可以轻松添加插件并让它为您执行此操作。