JQuery扩展部分

我有三个部分在点击时可展开（slideDown），这很好。但是，我在扩展部分中有按钮应该关闭打开的部分，但只有第一部分的关闭按钮实际上关闭了它的部分。第二部分和第三部分的关闭按钮不会关闭，即使我所针对的所有类和ID都是相同的。JQuery扩展部分

HTML

<div id="first-section"> 
<a id="first-section-link"></a> 
</div> 

<div id="second-section"> 
<a id="second-section-link"></a> 
</div> 

<div id="third-section"> 
<a id="third-section-link"></a> 
</div> 

<div id="first-expanded" class="expanded-section"> 
<a id="closeBtn"></a> 
</div> 

<div id="second-expanded" class="expanded-section"> 
<a id="closeBtn"></a> 
</div> 

<div id="third-expanded" class="expanded-section"> 
<a id="closeBtn"></a> 
</div>

JQuery的

$('#closeBtn').on('click', function() { 
    $('.expanded-section').slideUp(350); 
}); 

$('#first-section-link').on('click', function() { 
    $('#first-expanded').delay(350).slideDown(350); 
}); 

$('#second-section-link').on('click', function() { 
    $('#second-expanded').delay(350).slideDown(350); 
}); 

$('#third-section-link').on('click', function() { 
    $('#third-expanded').delay(350).slideDown(350); 
});

来源

2016-12-04 Philip Stier

您有无效的HTML。整个HTML文档中'id'的值应该是唯一的。 –

不能使用的每个元素在同一id属性。而不是id使用class：

<a class="closeBtn"></a>

来源

2016-12-04 15:57:00 mitch

该死的，菜鸟的错误。谢谢你的帮助，那就是诀窍。 –

JQuery扩展部分

回答

相关问题