問題與我的幻燈片切換（抱歉模糊標題）

Question

你好抱歉的模糊標題，但我想不出一個標題。

我寫了下面的代碼。您不需要完全閱讀它，只需在所有代碼下面閱讀我的錯誤。

HTML：

<!-- 1 --> 
<div class="title"> 
    <p>title</p> 
</div> 

<div class="boxes"> 
    <div class="box">boxes1</div> 
    <div class="box">boxes1</div> 
</div> 

<!-- 2 --> 
<div class="title"> 
    <p>title</p> 
</div> 

<div class="boxes"> 
    <div class="box">boxes2</div> 
    <div class="box">boxes2</div> 
</div> 

<!-- 3 --> 
<div class="title"> 
    <p>title</p> 
</div> 

<div class="boxes"> 
    <div class="box">boxes3</div> 
    <div class="box">boxes3</div> 
</div> 

的jQuery：

jQuery(".title").click(function(){ 
    jQuery(".boxes").slideUp(); 
    jQuery(this).next().slideToggle(); 
}); 

CSS：

.boxes { 
    display: none; 
} 

它做什麼是在點擊 '標題' 股利時，立即將 '盒子' 的div它被打開後。

此外，它關閉任何其他'盒'div是開放的。

這一切都正常工作，但問題是，當'盒'的div打開，你試圖通過點擊它上面的'標題'div關閉它，該盒div將關閉，然後再次打開。

任何人都知道如何重寫這段代碼來修復這個故障？

我在下面提供了一個jsfiddle鏈接來重新創建錯誤。要重新創建錯誤，請單擊「標題」，然後再次單擊以關閉它。您將看到毛刺我談論

jsfiddle-link

謝謝！

Answer 1

我對自己的jsfiddle here進行了自己的更改。我改變什麼：

• 店叫open

• 給了標題的每一個唯一的ID屬性

• 點擊標題時，他們的切換的可變的狀態，我稱之爲toggleVisibility存儲單擊標題的原始狀態，否定其所有狀態，然後將單擊標題的切換狀態設置爲其原始狀態的反轉。

• 一旦狀態更新，檢查點擊標題的新狀態，並且如果true該框將被打開。