未归档段落的jQuery逻辑

我有以下html结构

<p class="expandableContent" ><span class="label">Computer and Laptop Repairs</span></p>
<div style="clear: both;"></div>
<div class="services">content</div>

<p class="expandableContent" ><span class="label">Softrware and Hardware</span></p>
<div style="clear: both;"></div>
<div class="services">content2</div>

电脑和笔记本电脑维修

内容
软硬件

内容2

所以我重复了content1 content2 content3等。我正在编写一个切换函数，这样当我点击第一段时，第一个content div就会展开。当我点击第二段时，第二段会展开，但所有其他打开的内容都会折叠

有人能帮忙吗

$('.expandableContent').click(function() {
    $('.services').hide();
    $('.services', this).show();
});

还可以将以下内容添加到html中：

<div class="expandableContent">
  <p>....</p>
  <div style="clear:both;"></div>
  <div class="services">content</div>
</div>

内容

还可以将以下内容添加到html中：

<div class="expandableContent">
  <p>....</p>
  <div style="clear:both;"></div>
  <div class="services">content</div>
</div>

内容

您也可以在不修改HTML的情况下完成此操作

$(document).ready(function() {
    $('.services').hide();
    $('.expandableContent').click(function() {
        $('.services:visible').toggle();
        $(this).nextAll('.services:first').toggle();
    });
});

---

代码应该基本上是自解释的。通过仅选择visible.services，我可以将它们切换为hidden。然后，我使用nextAll（）查找类.services的以下所有同级，但只取第一个。（我不能使用next（），因为它只接受紧跟其后的兄弟，然后按类对其进行筛选。这不是我们想要的。）然后我在可见和隐藏之间切换。您可以在找到一个工作示例。

您也可以在不修改HTML的情况下完成它

$(document).ready(function() {
    $('.services').hide();
    $('.expandableContent').click(function() {
        $('.services:visible').toggle();
        $(this).nextAll('.services:first').toggle();
    });
});

---

代码应该基本上是自解释的。通过仅选择visible.services，我可以将它们切换为hidden。然后，我使用nextAll（）查找类.services的以下所有同级，但只取第一个。（我不能使用next（），因为它只接受紧跟其后的兄弟，然后按类对其进行筛选。这不是我们想要的。）然后我在可见和隐藏之间切换。您可以在上找到一个工作示例。

这应该可以帮您解决问题：

$(function() {
    $('.expandableContent').click(function() {
        $('.services').hide();
        $(this).nextAll('.services:first').show();
    });
});

首先，您将隐藏所有

.services

div，然后选择单击段落后的下一个div，并将其展开

---

下面是一个正在运行的演示：

这应该可以为您提供技巧：

$(function() {
    $('.expandableContent').click(function() {
        $('.services').hide();
        $(this).nextAll('.services:first').show();
    });
});

首先，您将隐藏所有

.services

div，然后选择单击段落后的下一个div，并将其展开

下面是一个演示：