处理多个切换

我陷入了一个toggle() 噩梦，终于寻求帮助。

我想要的很简单，我有三个链接：

a.showcountries.bronze
a.showcountries.silver
a.showcountries.gold

和三个盒子：

.countries.bronze
.countries.silver
.countries.gold

你可能已经明白我想做什么了。所有框都是隐藏的，购买默认值，当我单击青铜时，它会向下滑动青铜，再次单击它时，它会向上滑动，依此类推。我遇到的问题是所有三个框占据页面上的相同空间，因此我一次只能打开一个框。所以我单击青铜，向下滑动青铜框，如果我然后单击银色，它应该向上滑动，而银色框应该向下滑动......

$('a.showcountries.bronze').toggle(
        function(){
            $('.countries.silver, .countries.gold').slideUp();
            $('.countries.bronze').slideDown();
        },
        function(){
            $('.countries.bronze').slideUp();
        }
    );
    $('a.showcountries.silver').toggle(
        function(){
            $('.countries.bronze, .countries.gold').slideUp();
            $('.countries.silver').slideDown();
        },
        function(){
            $('.countries.silver').slideUp();
        }
    );
    $('a.showcountries.gold').toggle(
        function(){
            $('.countries.silver, .countries.bronze').slideUp();
            $('.countries.gold').slideDown();
        },
        function(){
            $('.countries.gold').slideUp();
        }
    );  

我正在努力让转换正常工作，因为切换似乎不同步，有时我最终不得不在执行任何操作之前单击链接两次。我也确信有一个使用更少代码的解决方案。我确实尝试检测该类并将其传递给一个通用函数来完成所有这些操作，但无法让它发挥作用。

toggle()作为一个事件，它会记住上一次单击并在下一次单击时运行备用功能。您最好使用单击事件并检查可见性。像这样的东西可能更适合你：

$(".showcountries").click(function () {
    var cls = this.className.match(/gold|silver|bronze/),
        box = $(".countries."+cls[0]);

    // slideUp() on all .countries elements
    $(".countries").not(box).slideUp();

    box.slideToggle();
});

工作演示：http://jsfiddle.net/kSrvZ/1 http://jsfiddle.net/kSrvZ/1（感谢一江建议滑动切换() http://api.jquery.com/slideToggle/聊天时）。