處理多個切換

我陷入了一個切換（）噩夢，並最終尋求幫助。處理多個切換

我想是非常簡單的，我有三個環節：

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

處理多個切換

回答

相關問題