gpt4 book ai didi

jQuery 相邻同级选择器无法正确遍历

转载 作者:行者123 更新时间:2023-12-01 05:21:07 25 4
gpt4 key购买 nike

伙计们,我在使用 jQuery 遍历时遇到问题我正在做的是有 2 <a>元素,两者 anchor元素具有相同的 <div>元素,默认情况下这些 <div>有一个名为 display:none 的属性。当我点击任何 anchor元素<div>元素是 slideToggle 。但点击一个anchor后元素,上一个 anchor元素<div>slideUp 。它工作正常,但是当我第一次单击第二个 anchor 时元素,然后先单击 anchor ,第二个anchor元素<div>不是slideUp .

  $('.labels').click(function () {

$(this).next().stop().slideToggle();
$(this).prev().stop().slideUp();

});
.content{
border:1px solid black;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>None</title>
</head>
<body>
<a class="labels">
<p>Click Label One</p>
</a>
<div class="content">
<p>Tea</p>
</div>
<a class="labels">
<p>Click Label Two</p>
</a>
<div class="content">
<p>Coffee</p>
</div>
</body>
</html>

最佳答案

这是因为.prev()没有遍历到最后一个元素。要实现此目的,您需要首先从所有 .content 元素中删除颜色,然后将颜色设置为下一个兄弟元素:

var $content = $('.content');
$('.labels').click(function () {
$content.stop().slideUp();
$(this).next().stop().slideToggle();
});
.content{
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>None</title>
</head>
<body>
<a class="labels">
<p>Click Label One</p>
</a>
<div class="content">
<p>Tea</p>
</div>
<a class="labels">
<p>Click Label Two</p>
</a>
<div class="content">
<p>Coffee</p>
</div>
</body>
</html>

关于jQuery 相邻同级选择器无法正确遍历,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43674099/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com