Question

我陷入了一场噩梦，终于要求帮助了。

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

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();
        }
    );

我很难让转换工作，因为切换似乎不同步，有时我最终必须在它做任何事情之前点击两次链接。我也确定这是一个使用少量代码的解决方案。我确实尝试检测类并将其传递给一个通用函数来完成所有这些，但无法让它发挥。

Answer 1

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 （感谢YiJiang在聊天时建议slideToggle()）。

Answer 2

~~除非我得到错误的结局，否则我认为toggle不会做你认为它做的事情。您应该使用click事件，~~，我还会为您的链接使用ID而不是类。这样的事情应该有效（未经测试）：

$('a.showcountries').click(function()
{
    var class = $(this).attr('id');
    $('.countries').not('.' + class).slideUp();
    $('.countries').filter('.' + class).slideDown();
});

编辑：我的立场得到了纠正！你每天都学到一些东西：）

Answer 3

我已经制作了一个可以让你接近的jsFiddle。

Check it here

它基于点击事件，您使用ID来检查要显示的div，如果已经打开则关闭该div。你能用这种方式设置你的html / css / js吗？

处理多个切换

3 个答案: