Question

所以我试图用一小撮面板制作一种类似手风琴的效果，通过点击要打开的面板顶部的面板来启动动作。这一切都很好，但我遇到的问题是选择另一个打开面板并在打开新面板时关闭它。新面板也将关闭！

$(document).ready(function(){
    $('.content_accrd').css({"height":"0px"});
$('.paneltop').click( function() {
    $(this).css({"background-position":"0px -21px"})
    .siblings().animate({"height":"100px"}, 200)
    .parent().children(".content_accrd").animate({"height":"0px"});
})
})

Answer 1

试试这个：

$(document).ready(function(){
    $('.content_accrd').css({"height":"0px"});
    $('.paneltop').click( function() {
        $(this).css({"background-position":"0px -21px"})
            .parent().children(".content_accrd").animate({"height":"0px"})
            .siblings().animate({"height":"100px"}, 200);
     })
})

首先关闭其他打开的面板，然后打开单击的面板。

Answer 2

我认为排除当前点击的DIV也会有效。但那并不重要。

$(document).ready(function(){
$('.content_accrd').css({"height":"0px"});
$('.paneltop').click( function() {
    $(this).css({"background-position":"0px -21px"})
    .siblings().animate({"height":"100px"}, 200).not($(this))
    .parent().children(".content_accrd").animate({"height":"0px"});
  })
})

我不知道你是否已经看过这篇文章： http://www.artzstudio.com/2009/04/jquery-performance-rules/ 它提供了一些有用的性能提示，帮助我完成学习过程。

另外你一定要尝试自己制作插件，这也是向更深入理解jQuery迈出的一大步。

http://stefangabos.ro/jquery/jquery-plugin-boilerplate-oop/

Jquery选择div的建议

2 个答案: