这应该是一个简单的修复,但我还无法理解 javascript 选择器。我有一个 h3 li 元素列表,每个元素都包含单击时显示的内容。我想要一个切换箭头在单击时从上变为下。但对于下面的 JS 代码,所有 li 元素都会发生这种情况,包括未显示折叠内容的元素。我该如何解决这个问题?
$(document).ready(function () {
$('#toggle-view li').click(function () {
var text = $(this).children('div.panel');
if (text.is(':hidden')) {
text.slideDown('200');
$("h3 .fa-caret-up").removeClass("fa-caret-up").addClass("fa-caret-down");
} else {
text.slideUp('200');
$("h3 .fa-caret-down").removeClass("fa-caret-down").addClass("fa-caret-up");
}
});
});
这是 html,以防您需要:
<ul class="services-ul facebook-ul" id="toggle-view">
<li>
<h3><i class="fa fa-check"></i>Header 1<i class="fa fa-caret-up"></i></h3>
<span>+</span>
<div class="panel">
<p>dummy text...</p>
</div>
</li>
<li>
<h3><i class="fa fa-check"></i>Header 2<i class="fa fa-caret-up"></i></h3>
<span>+</span>
<div class="panel">
<p>dummy text...</p>
</div>
</li>
<li>
<h3><i class="fa fa-check"></i>Header 3<i class="fa fa-caret-up"></i></h3>
<span>+</span>
<div class="panel">
<p>dummy text...</p>
</div>
</li>
<li>
<h3><i class="fa fa-check"></i>Header 4<i class="fa fa-caret-up"></i></h3>
<span>+</span>
<div class="panel">
<p>dummy text...</p>
</div>
</li>
</ul>
最佳答案
您需要指定与 this
相关的元素(在您的 click
事件中是已被单击的 li
元素)。
只需将 this
包装在 jQuery 选择器中 ($(this)
),然后使用 jQuery's find()
method查找其中包含的元素:
$(this).find('.fa-caret-up').removeClass('.fa-caret-up').addClass('.fa-caret-down');
还有:
$(this).find('.fa-caret-down').removeClass('fa-caret-down').addClass('fa-caret-up');
关于javascript - 如何使用javascript仅选择一个li元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26505689/