Javascript jquery-toggle-won'；不要单击关闭

我有一个手风琴风格的切换代码。效果很好，唯一的问题是，若你们点击一个打开的手风琴，它会上下滑动。它不会滑动关闭

有什么想法吗

谢谢

//toggles 2
$('body').on('click','.toggle h3 a', function(){

    if($(this).parents('.toggles').hasClass('accordion')) return false;

    $(this).parents('.toggles').find('.toggle > div').slideUp(300);
    $(this).parents('.toggles').find('.toggle h3 a i').attr('class','icon-plus-sign');
    $(this).parents('.toggles').find('.toggle').removeClass('open');

    $(this).parents('.toggle').find('> div').slideDown(300);
    $(this).parents('.toggle').addClass('open');

    //switch icon
    if( $(this).parents('.toggle').hasClass('open') ){
        $(this).find('i').attr('class','icon-minus-sign');
    } else {
        $(this).find('i').attr('class','icon-plus-sign');
    }

    return false;
});



<div class="toggles">

<div class="toggle accent-color"><h3><a href="#"><i class="icon-minus-sign"></i>First Accord</a></h3>
    <div>
    Content
    </div>
</div> 

<div class="toggle accent-color"><h3><a href="#"><i class="icon-minus-sign"></i>Second Accord</a></h3>
    <div>
    Content
    </div>
</div> 

//切换2
$（'body'）。在（'click'，'上。切换h3 a'，函数（）{
if（$（this）.parents（'.toggles'）.hasClass（'accordion'）返回false；
$（this）.parents（'.toggles'）.find（'.toggle>div'）.slideUp（300）；
$（this）.parents（'.toggles'）.find（'.toggle h3 a i'）.attr（'class'，'icon-plus-sign'）；
$（this）.parents（'.toggles'）.find（'.toggle'）.removeClass（'open'）；
$（this）.parents（'.toggle'）.find（'>div'）.slideDown（300）；
$（this）.parents（'.toggle'）.addClass（'open'）；
//开关图标
if（$（this）.parents（'.toggle'）.hasClass（'open'））{
$（this.find（'i'）.attr（'class'，'icon-减号'）；
}否则{
$（this.find（'i'）.attr（'class'，'icon-plus-sign'）；
}
返回false；
});
内容
内容

---

很抱歉，我没有真正理解您的代码发生了什么，所以我从头重写了js部分：

---

请看一看jquery UI，因为它对所有这些常见的东西都有很大的帮助（无需重新发明轮子）

它为什么这么做很简单。您的函数始终执行slideUp和slideDown。按这个顺序。因此，当您的div被折叠时，它将执行slideUp（因为它已经折叠了，所以实际上不会产生任何效果），然后它将向下滑动。现在，当div展开时：div将滑动（这次它确实上升，因为它没有折叠），然后下降

更好的方法是使用滑动切换

编辑：此外，您还可以使用

if($(element).is(':visible')){
   //expanded
} else {
   //collapsed
}

---

四号导弹同时发射两枚导弹是正确的

解决这一问题的一种方法是执行一个if/then语句，检查它是否打开，然后根据该语句触发打开/关闭

我还向上/下滑动的容器中添加了类“togglepanel”，以便下面的内容更容易阅读

 if($(this).closest('.toggle').hasClass('open')){
        console.log('open');
        $(this).parents('.toggle').find('.toggle-panel').slideUp(300);
        $(this).closest('.toggle').removeClass('open');
        return
    }
    else {
        console.log('close');
        $(this).parents('.toggles').find('.toggle h3 a i').attr('class','icon-plus-sign');
        $(this).parents('.toggle').find('.toggle-panel').slideDown(300);
        $(this).parents('.toggle').addClass('open');
    }

---

恐怕那些“div”选择器有问题。我们能看到相关的html吗？谢谢回复！添加的HTMLRe从头开始写这个部分非常棒，但是如果你不解释你添加的一些东西，也许他们还没有看到，这对最初的提问者来说是没有任何好处的。好吧，这很接近。。。我只需要它来关闭任何打开的切换，如果你点击另一个切换并打开它。。。所以一次只能打开一个

 if($(this).closest('.toggle').hasClass('open')){
        console.log('open');
        $(this).parents('.toggle').find('.toggle-panel').slideUp(300);
        $(this).closest('.toggle').removeClass('open');
        return
    }
    else {
        console.log('close');
        $(this).parents('.toggles').find('.toggle h3 a i').attr('class','icon-plus-sign');
        $(this).parents('.toggle').find('.toggle-panel').slideDown(300);
        $(this).parents('.toggle').addClass('open');
    }