無法隱藏所有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內容

回答

相關問題