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 - 如何让所有标签最初关闭

回答

相关问题