点击展开应导致折叠其他已打开的项目？ [英] Click to expand shall result in collapsing other opened items?

问题描述

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

html

 < ul class =footernav> 
< li> 
< a href =javascript :; class =topToggle>第1项< / a> 
< div class =typeToggle typeCont> 
连结区域1 
< / div> 
< / li> 
< li> 
< a href =javascript :; class =topToggle>第2项< / a> 
< div class =typeToggle filterCont>连结区域2< / div> 
< / li> 
< / ul> 
  

Jquery
< pre $ $（document）.ready（function（）{
$（。topToggle）。click（function（）{
$（this）.parent （）.children（'。typeToggle'）。slideToggle（）;
}）;
}）;


FIDDLE

解决方案

您可以 slideUp ） all .typeToggles 在您之前 slideToggle（）具体一个。

（）。

  $（。topToggle）。click（function（）{
 $（。typeToggle）。 
 $（this）.parent（）。children（'。typeToggle'）。slideToggle（）; 
}）; 
  

如果您点击已经扩展的项目，这会导致上/下移动，但您可以放入如果您愿意的话，可以使用一些检查来阻止。

示例小提琴

---

编辑：

这就是所谓的手风琴，许多例子和插件可以在网上找到。 jQuery UI提供了这个功能，你可以在这里看到它;如果您不想重新创建功能，通常并不重要，只需添加一个插件并让它为您执行。

when i click on the menu item, i want just that item to expand and rest shall collapse.

example: i click on item 1 to expand it, then i click on item 2. So, in this case item 1 shall collapse itself.

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

解决方案

You can slideUp() all .typeToggles before you slideToggle() the specific one.

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

This will result in a UP/DOWN motion if you click the already expanded item but you could put in some checks to stop that if you wish.

Example fiddle

---

Edit:

This is what is known as an Accordion and many examples and plugins can be found on the web. jQuery UI provides this functionality you can see it here; if you don't want to recreate the functionality it is usually trivial to add a plugin and have it perform this for you.

这篇关于点击展开应导致折叠其他已打开的项目？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！