处理多个切换

我陷入了一个切换（）噩梦，并最终寻求帮助。处理多个切换

我想是非常简单的，我有三个环节：

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

和三盒：

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

你或许可以AREADY看到我想要做的事。所有的盒子都是隐藏的默认购买，当我点击青铜时，它会滑下青铜，再次点击它就会滑落，依此类推。我遇到的问题是，所有三个盒子都占据了页面上的相同空间，所以我一次只能打开一个盒子。所以我点击青铜，下滑动青铜箱，如果我再单击银应该回到向上滑动和银一个滑下......

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

我挣扎得到的转换工作，如切换似乎不同步，有时我最终不得不在两次点击之前点击一个链接。我也确信这是一个使用很少很多代码的解决方案。我确实尝试过检测这个类并将它传递给一个通用函数来完成所有这些，但无法让它玩。

来源

2010-11-17 Chris J Allen

您应该将您的元素类（例如.showcountries.gold）更改为.showcountries_gold或类似的东西，只需删除类名的中间点即可。 – kst 2010-11-17 09:46:35

@kst：这些点不是类名的一部分;他们分隔分开的类。在CSS的选择器语法中，'div.class-a.class-b'选择'class-a'和'class-b'的'div'。 – 2010-11-17 09:50:00

感谢上帝的人传统上只颁发三种类型的奖牌，如果有五个，你会怎么做？：P – 2010-11-17 09:56:57

我做了一个jsFiddle，应该让你关闭。

Check it here

它是基于一个click事件，并使用id来检查哪些div的要显示，并关闭一个，如果它已经打开。你能以这种方式获得你的html/css/js设置吗？

来源

2010-11-17 09:45:57

这是一个AWESOME网站，谢谢！ – 2010-11-17 09:50:44

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（感谢弋江用于提示slideToggle()上聊天）。

来源

2010-11-17 09:40:55

+1不错。不过，'$（box）'wrap是不必要的，因为你已经拥有一个jQuery集合。我会用'box.is（'：visible'）？ box.slideUp（）：box.slideDown（）;'而不是（评论清晰度的简写）。 – jensgram 2010-11-17 09:54:54

嗯，似乎你编辑它在此期间更好的解决方案:) – jensgram 2010-11-17 09:55:57

@jensgram：是的谢谢，我今天早上没有我的咖啡;-) – 2010-11-17 09:57:21

~~除非我得到了棒的错误结局，否则我认为 toggle不会做你认为它的作用。你应该使用 click这个事件，~~ ，我也会为你的链接使用ID而不是类。像这样的东西应该工作（未经测试）：

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

编辑：我站好了！你每天都会学到东西:)

来源

2010-11-17 09:45:04

处理多个切换

回答

相关问题