クリックすると展開可能(slideDown)のセクションが3つあり、うまく機能しています。ただし、展開されたセクション内に開いたセクションを閉じるボタンがありますが、実際には最初のセクションの閉じるボタンだけがそのセクションを閉じます。私がターゲットにしているすべてのクラスとIDが同じであっても、2番目と3番目のセクションの閉じるボタンは閉じません。
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);
});
id
各要素で同じ属性を使用することはできません。id
使用する代わりにclass
:
<a class="closeBtn"></a>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加