Question

伙计我在使用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>

Answer 1

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

＆＃13;

var $content = $('.content');
$('.labels').click(function () {
    $content.stop().slideUp();
    $(this).next().stop().slideToggle();
});

＆＃13;

.content{
border:1px solid black;
}

＆＃13;

<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>

＆＃13;

Answer 2

问题是因为你的逻辑是有缺陷的。当您点击第一个where元素时，没有a元素可以设置prev()。要解决此问题，您可以选择所有slideUp()元素并在其上调用.content，然后再点击已点击的slideUp()。试试这个：

slideDown()

$('.labels').click(function() {
  $('.content').stop().slideUp();
  $(this).next('.content').stop().slideDown();
});

.content { 
  border: 1px solid black; 
  display: none;
}
.active { color: #F00; }

jQuery相邻兄弟选择器无法正确遍历

2 个答案: