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

【问题标题】：Click to expand shall result in collapsing other opened items?点击展开会导致折叠其他打开的项目吗？
【发布时间】：2014-04-24 13:27:35
【问题描述】：

当我点击菜单项时，我只希望该项目展开而其余部分将折叠。

示例：我单击第 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

【问题讨论】：

标签： jquery html slidetoggle

【解决方案1】：

你可以slideUp()所有.typeToggles在你slideToggle()具体一个之前。

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

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

Example fiddle

编辑：

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

【讨论】：