手風琴開啓/關閉所有內容按鈕和更多

我在網站內部有一個響應式手風琴功能，我想用一個按鈕（打開）和（關閉）所有內容，當所有內容都將其內容名稱更改爲（打開）在所有內容打開時關閉和（關閉）。手風琴開啓/關閉所有內容按鈕和更多

此外，當使用（打開）按鈕時，已經打開的內容會再次關閉，並且加號和減號圖標在內容關閉時不會以正確的方式顯示（減號圖標），反之亦然。

這裏是fiddle

有人可以幫助我？

// Accordion // 

$('.header').click(function(){ 
    $('.content',$(this).parent()).slideToggle(); 
    $(this).toggleClass('active'); 
}) 

$('.toggle-btn').click(function(){ 
    $('.content').slideToggle(); 
    $(this).toggleClass('active'); 
})

來源

2014-10-30 KP83

你去那裏： http://jsfiddle.net/w3srayj6/21/

// Accordion // 

$(document).ready(function() { 

    $('.header').click(function(){ 
     $('.content',$(this).parent()).slideToggle(); 
     $(this).toggleClass('active'); 
     $('.toggle-btn').addClass('active').trigger("change"); 
    }) 

}); 

$(document).ready(function() { 
    $('.toggle-btn').change(function(){ 
     var headers = $('.header'); 
     var state = 'open'; 
     $.each(headers,function(){ 
      if($(this).hasClass('active')) 
       state = 'close'; 
     }); 
     if(state == 'open') 
      $(this).addClass('active') 
     $(this).text(state); 
    }); 
    $('.toggle-btn').click(function(){ 
     var current = $(this); 
     current.toggleClass('active'); 
     current.trigger("change"); 
     var contents = $('.content'); 
     $.each(contents, function(){ 
      if(!current.hasClass('active')) 
       $(this).slideUp(); 
      else 
       $(this).slideDown(); 
     }); 
     var headers = $('.header'); 
     $.each(headers, function(){ 
      if(current.hasClass('active')) 
       $(this).addClass('active'); 
      else 
       $(this).removeClass('active'); 
     });  
     current.trigger("change"); 
    }) 

}); 

// Read more // 

$(window).scroll(function() { 
    if ($(this).scrollTop() < 20) { 
     $('.read-more').slideDown(200); 
    } else { 
     console.log('there'); 
     $('.read-more').slideUp(200); 
    } 
});

有時使用切換可能有點棘手和混亂。

在這種情況下，我使用「hasClass」爲了確定項目是否已經打開或沒有。由於我們只有「打開」和「關閉」狀態，我們可以說，只要「打開」不是「活動」（活動的類），我們應該添加「活動」類標誌到所有標題和內容。在相反的情況下也是如此。這可確保已切換的項目不會重新切換。

來源

2014-10-30 14:01:11 MorKadosh

謝謝隊友！大！我可以在這個腳本中將更改打開到關閉狀態？ – KP83 2014-10-30 14:16:30

對不起，沒有理解你的問題 – MorKadosh 2014-10-30 14:37:26

對不起，它變得令人困惑，因爲有很多不同的狀態，但即使有一個內容打開按鈕更改其名稱關閉和功能，如果所有或一個關閉或打開單獨手動按鈕將名稱更改爲打開或關閉。對不起，我的英文希望你能理解。感謝您的幫助！ [新的代碼和按鈕狀態]（http：// jsfiddle。net/foroloca/w3srayj6/16 /） – KP83 2014-10-30 15:04:13

如果你檢查類active切換髮生之後，你就可以改變取決於是否切換類處於活動狀態的按鈕的文本。

See this updated fiddle（編輯以更改圖標也）

來源

2014-10-30 12:56:16 mark

感謝馬克大大的幫助！但是如果某人已經打開某個部分，則在他們打開所有內容時關閉，反之亦然。 – KP83 2014-10-30 13:29:49

此外，當某人手動關閉所有內容而不是主關閉按鈕時，當某人手動打開所有內容時，按鈕名稱和功能也保持不變。 – KP83 2014-10-30 13:51:37

@foroloca你只需循環遍歷元素，並檢查它們是否具有「active」類，同時該按鈕具有「active」類。如果是這樣，請跳過它。如果沒有，那麼添加類（反之亦然） – mark 2014-10-30 13:52:05

當您按鈕來更改你的正/負ICONE，您必須選擇與父母（）和子女（）jQuery的方法是這樣的具體.header類：

$('.toggle-btn').click(function(){ 
    $('.content').each(function() { 
    $(this).slideToggle(); 
    $(this).parent().find('.header').toggleClass('active'); 
    }); 
});

來源

2014-10-30 12:56:18

謝謝你thibault！此代碼看起來更清晰，但如何編寫用於更改按鈕名稱的代碼，並在點擊打開時再次打開內容時解決問題。 – KP83 2014-10-30 13:37:12

手風琴開啓/關閉所有內容按鈕和更多

回答

相關問題