展开和折叠div [英] Expand and collapse div

问题描述

展开和折叠功能目前正常，但我想修改功能，因此当我点击展开1 ，然后单击展开2 ，即展开1 应该自动折叠。这意味着只有一个 div 可以一次扩展，而其他所有其他应该保持折叠状态。

HTML ：

 < div class =container> 
< div class =header>< span>展开1< / span> 
 
< / div> 
< div class =content> 
< ul> 
< li>这只是一些随机内容。< / li> 
< li>这只是一些随机内容。< / li> 
< li>这只是一些随机内容。< / li> 
< li>这只是一些随机内容。< / li> 
< / ul> 
< / div> 
 
< div class =header>< span>展开2< / span> 
 
< / div> 
< div class =content> 
< ul> 
< li>这只是一些随机内容。< / li> 
< li>这只是一些随机内容。< / li> 
< li>这只是一些随机内容。< / li> 
< li>这只是一些随机内容。< / li> 
< / ul> 
< / div> 
  

CSS

  .container {
 width：100％; 
 border：1px solid＃d3d3d3; 
} 
 .container div {
 width：100％; 
} 
 .container .header {
 background-color：＃d3d3d3; 
 padding：2px; 
光标：指针; 
 font-weight：bold; 
} 
 .container .content {
 display：none; 
 padding：5px; 
 
  

Jquery

<$ p点击（函数（）{

$ header = $（this）;
//获取下一个元素$（$。$ header）
$ content = $ header.next（）;
//打开需要的内容 - 切换幻灯片 - 如果可见，则向上滑动，如果不滑动
$ content.slideToggle（500，函数（）{
//在slideToggle完成后执行此操作
//根据内容div的可见性更改标题的文本
$ header.text（function（）{
/ /根据条件改变文本
return $ content.is（：visible）？Collapse：Expand;
}）;
}）;

}）;

示例..

http://jsfiddle.net/eK8X5/8290/

  $（。header）。click（ function（）{
 $ header = $（this）; 
 $ content = $ header.next（）; 
 $（。content）。not（$ content）.slideUp ）.prev（）。text（Expand）; 
 $ content.slideToggle（500，function（）{
 $ header.text（function（）{
 return $ content.is （：visible）？Collapse：Expand; 
}）; 
}）; 
 
}）; 
  

小提琴

• 全部收起，除了当前的使用 $（。content）。not（$ content）.slideUp（）。prev（）。text（Expand）;

The expand and collapse functionality is currently working fine but I'd like to modify the functionality so when I click on Expand 1, and then click on Expand 2, that Expand 1 should collapse automatically. This means that only one div is allowed to be expanded at once while all the others should remain collapsed.

HTML:

<div class="container">
<div class="header"><span>Expand 1</span>

</div>
<div class="content">
    <ul>
        <li>This is just some random content.</li>
        <li>This is just some random content.</li>
        <li>This is just some random content.</li>
        <li>This is just some random content.</li>
    </ul>
</div>

 <div class="header"><span>Expand 2</span>

</div>
<div class="content">
    <ul>
        <li>This is just some random content.</li>
        <li>This is just some random content.</li>
        <li>This is just some random content.</li>
        <li>This is just some random content.</li>
    </ul>
</div>

CSS

.container {
width:100%;
border:1px solid #d3d3d3;
 }
.container div {
 width:100%;
 }
.container .header {
 background-color:#d3d3d3;
 padding: 2px;
 cursor: pointer;
 font-weight: bold;
 }
 .container .content {
 display: none;
 padding : 5px;
  }

Jquery

$(".header").click(function () {

$header = $(this);
//getting the next element
$content = $header.next();
//open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(500, function () {
    //execute this after slideToggle is done
    //change text of header based on visibility of content div
    $header.text(function () {
        //change text based on condition
        return $content.is(":visible") ? "Collapse" : "Expand";
    });
});

});

Example..

http://jsfiddle.net/eK8X5/8290/

解决方案

You can do,

$(".header").click(function () {
    $header = $(this);
    $content = $header.next();
    $(".content").not($content).slideUp().prev().text("Expand");
    $content.slideToggle(500, function () {
        $header.text(function () {
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

});

Fiddle

• Collapse all, except the current one using the code $(".content").not($content).slideUp().prev().text("Expand");

这篇关于展开和折叠div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！