问题与我的幻灯片切换（抱歉模糊标题）

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该框将被打开。