Question

我有以下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>

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

有人可以提供帮助吗？

Answer 1

$('.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>

Answer 2

您也可以在不修改HTML的情况下执行此操作。

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

代码应该是不言自明的。通过仅选择可见的.services，我可以将它们切换为隐藏。然后我使用nextAll（）来查找所有跟随类，.services的兄弟姐妹，但只取第一个。（我不能使用next（），因为它只需要紧接着的兄弟，然后按类过滤它。不是我们想要的。）然后我在可见和隐藏之间切换。您可以在http://jsfiddle.net/Lv2mW/找到一个有效的例子。

Answer 3

这应该适合你：

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

首先，您将隐藏所有.services div，然后在单击的段落后选择下一个div，然后展开它。

以下是演示中的演示：http://jsfiddle.net/Ender/5nYpT/

unlicked段落的jQuery逻辑

3 个答案: