Question

有一个简单的FAQ Accordion结构，并设法在悬停在标题上时打开/关闭描述，但无法最初关闭所有标签（描述）。

我读过一些关于将可折叠设置为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(){
    });
})

Answer 1

首先，您可以使用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事件，因为这也会关闭mouseout上相关的.description元素。

然后，您可以使用CSS隐藏页面加载中的所有.description元素：

.description {
    display: none;
}

Example fiddle

Answer 2

你想使用JQuery的每个函数来遍历所有以＆＃34;描述＆＃34;开头的元素。 id并隐藏它们：

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

这里是jsFiddle

jQuery Accordion - 如何让所有标签最初关闭

2 个答案: