我有一个常见问题解答设置。单击问题时,我会切换显示相应的答案 (.sibling
)。效果很好,再次单击同一问题,就会关闭该同级。都好。
我想做的是在单击另一个问题时关闭当前打开的同级切换。 JavaScript 新手,所以我的实验失败了。我应该如何修改我的 JavaScript 才能实现这一点。任何帮助将不胜感激。
$(function () {
$(".answer").hide();
$(".question").click(function () {
$(this).siblings(".answer").toggle(300);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ol>
<li>
<div class="question">Question 1</div>
<div class="answer">Answer to Question 1</div>
</li>
<li>
<div class="question">Question 2</div>
<div class="answer">Answer to Question 2</div>
</li>
<li>
<div class="question">Question 3</div>
<div class="answer">Answer to Question 3</div>
</li>
</ol>
</div>
最佳答案
您只需在点击时隐藏任何 .answer
元素即可。
不过,如果您只是隐藏所有答案,则单击关闭当前答案将关闭它,然后重新打开它。
因此,您需要首先确定哪个答案是正确的同级对象(设置为下面的同级变量),然后使用 jQuery 的 .each()
方法将其与每个答案对象进行比较,然后只关闭那些不是目标同级的。为此,您可以在条件中使用 jQuery 的 .is()
方法将同级对象与每个答案对象进行比较。
$(function () {
$(".answer").hide();
$(".question").click(function ()
{
var sibling = $(this).next('.answer');
$(".answer").each(function() {
var answer = $(this);
if (!answer.is(sibling)) {
$(this).hide(300);
}
})
$(this).siblings(".answer").toggle(300);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ol>
<li>
<div class="question">Question 1</div>
<div class="answer">Answer to Question 1</div>
</li>
<li>
<div class="question">Question 2</div>
<div class="answer">Answer to Question 2</div>
</li>
<li>
<div class="question">Question 3</div>
<div class="answer">Answer to Question 3</div>
</li>
</ol>
</div>
关于javascript - jQuery 显示打开的同级,同时关闭先前打开的同级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47492608/