无法隐藏所有div内容

我正在制作可折叠/可展开的div，类似于手风琴，如果我点击特定标题，则会显示与标题相关的内容。如果我点击不同的标题，先前打开的内容将会关闭，然后才会显示最近点击的标题的当前内容，因此一次只能打开一个内容部分。我已经弄清楚了。无法隐藏所有div内容

<div class="container"> 
    <div class="title">ONE</div> 
    <div class="content">Content One</div> 
</div> 
<div class="container"> 
    <div class="title">TWO</div> 
    <div class="content">Content Two</div> 
</div> 
<div class="container"> 
    <div class="title">THREE</div> 
    <div class="content">Content Three</div> 
</div> 
<div class="container"> 
    <div class="title">FOUR</div> 
    <div class="content">Content Four</div> 
</div>

但是，我试图让所有的div都可以折叠并隐藏所有内容。我真的很难搞清楚这一部分。这是我到目前为止有：

$(".title").click(function() { 
    $content = $(this).next(); 
    if (!($content.is(":visible"))) { 
     $(".content").slideUp("fast"); 
     $content.slideToggle(200); 
    } 
});

DEMO：http://jsfiddle.net/2skczuze/

我用javascript相当新的，所以我无法弄清楚如何使扩大的股利，而无需打开另一个div合拢。

来源

2015-06-26 Lou

第1步：折叠除当前的所有内容div。

第2步：切换当前内容div的可见性。

$(".title").click(function() { 
    $(".content").not($(this).next()).slideUp(); 
    $(this).next().slideToggle(); 
});

Fiddle

来源

2015-06-26 09:58:26

正是我在找的东西。保持简短。非常感谢！ :) – Lou

@欢迎您。你可以通过点击绿色的勾号来接受答案 –

您可以使用：

$(".title").click(function() { 
    $(this).next().slideToggle('fast').parent().siblings().find('.content').slideUp('fast'); 
});

Working Demo

来源

2015-06-26 09:58:44

只需添加和其他条件，你的代码：

$(".title").click(function() { 
    $content = $(this).next(); 
    if (!($content.is(":visible"))) { 
     $(".content").slideUp("fast"); 
     $content.slideToggle(200); 
    } else { 
     $content.slideToggle(200); 
    } 
});

JSFIDDLE：http://jsfiddle.net/ghorg12110/2skczuze/3/

来源

2015-06-26 09:58:47

这是你想要的吗？只需添加一个else块并再次切换元素。

的Html

<div class="container"> 
    <div class="title">ONE</div> 
    <div class="content">Content One</div> 
</div> 
<div class="container"> 
    <div class="title">TWO</div> 
    <div class="content">Content Two</div> 
</div> 
<div class="container"> 
    <div class="title">THREE</div> 
    <div class="content">Content Three</div> 
</div> 
<div class="container"> 
    <div class="title">FOUR</div> 
    <div class="content">Content Four</div> 
</div>

的CSS

.container { 
width:300px; 
margin-bottom:5px; 
border:1px solid #d3d3d3; 
text-align:center; 
} 

.container .title { 
background-color:#00ffcc; 
width:auto; 
padding: 2px; 
cursor: pointer; 
font-weight: bold; 
} 
.container .content { 
background-color: #f0f0f0; 
display: none; 
padding : 5px; 
}

的Javascript

$(".title").click(function() { 
$content = $(this).next(); 
if (!($content.is(":visible"))) { 
    $(".content").slideUp("fast"); 
    $content.slideToggle(200); 
} 
else 
{ 
    $content.slideToggle(200); 
} 
});

http://jsfiddle.net/2skczuze/1/

来源

2015-06-26 09:58:59 Newinjava

所有你需要的是从你的提取一行代码声明：

$(".title").click(function() { 
    $content = $(this).next(); 
    $(".content").slideUp("fast"); // It is outside of if now 
    if (!($content.is(":visible"))) { 
     $content.slideToggle(200); 
    } 
});

以下是演示：http://jsfiddle.net/2skczuze/5/

来源

2015-06-26 10:00:08

我很努力地挣扎着，但我真正需要做的只是重新安排一些东西？！哈哈非常感谢你！ – Lou

试试这个DEMO

就在接下来的内容是可见的添加if声明：如果您想

$(".title").click(function() { 
    $content = $(this).next(); 
    if (!($content.is(":visible"))) { 
    $(".content").slideUp("fast"); 
    $content.slideToggle(200); 
    } else { 
    $content.slideUp("fast"); 
    } 
});

来源

2015-06-26 10:01:29 kapantzak

做一个扩展的div崩溃而不打开另一个div 然后可以这样做

$(".title").click(function() { 
    $content = $(this).next(); 
    if (($content.is(":visible"))) { 
     $content.slideToggle(200); 
    } 
    if (!($content.is(":visible"))) { 
     $(".content").slideUp("fast"); 
     $content.slideToggle(200); 
    } 
});

来源

2015-06-26 10:05:40

无法隐藏所有div内容

回答

相关问题