jQuery Accordion - 如何讓所有標籤最初關閉

有一個簡單的FAQ常見問題手風琴結構，並設法在懸停標題時打開/關閉描述，但無法設置所有標籤（說明）最初關閉。jQuery Accordion - 如何讓所有標籤最初關閉

我讀了一些關於將collapsible設置爲true並將active設置爲false但無法完成這項工作的內容。誰能幫忙？

HTML：

<div id="accordion"> 
    <div id="title1">Title 1</div> 
    <div id="description1">Description 1</div> 

    <div id="title2">Title 2</div> 
    <div id="description2">Description 2</div> 
</div>

的jQuery：

$('#title1').mouseover(function(){ 
    $('#description1').slideToggle('slow', function(){ 
    }); 
}) 

$('#title2').mouseover(function(){ 
    $('#description2').slideToggle('slow', function(){ 
    }); 
})

來源

2014-05-24 MC RO

首先，你可以使用DRY原則，以簡化你的代碼。通過在你的元素上使用公共類，你可以簡化你的JS代碼以適用於任何數量的元素。目前，您必須爲添加的每個新標題/說明添加事件處理程序。試試這個：

<div id="accordion"> 
    <div class="title">Title 1</div> 
    <div class="description">Description 1</div> 

    <div class="title">Title 2</div> 
    <div class="description">Description 2</div> 
</div>

$('.title').hover(function() { 
    $(this).next('.description').stop(true).slideToggle('slow'); 
});

請注意，我用的是hover事件，因爲這也將關閉鼠標移開時相關.description元素。

然後，您可以使用CSS隱藏所有的頁面加載.description元素：

.description { 
    display: none; 
}

Example fiddle

來源

2014-05-24 15:55:58

完美運作。還在ID =「switch」的div內添加了「全部打開/全部隱藏」選項。對於CSS，我創建了2個類.show {display：block;}和.hide {display：none;}。不知道如何爲這種行爲編寫jQuery，以及如何在打開標籤頁時將文本從打開開關切換到打開狀態，以及在打開標籤頁時隱藏所有文本。 –

你想使用jQuery的每個功能通過與「說明」開始的所有元素進行迭代ID並隱藏他們：

$('[id^=description]').each(function(i,e){ 
     $(e).hide(); 
});

這裏有一個jsFiddle

來源

2014-05-24 16:06:25 symlink

jQuery Accordion - 如何讓所有標籤最初關閉

回答

相關問題