jquery - 切换多个项目但希望一次只有一个可见？

Question

小提琴

这就是我希望它做的事情：

1. 每个红框 ( <span class="more">) 显示/隐藏描述 ( <div class="description">)
2. “关闭”链接也隐藏描述
3. 如果已经打开了一个描述，则需要在另一个打开时关闭它。因此，一次只能看到一个。

第 1 点和第 2 点，到目前为止一切顺利。但我被困在第 3 点上——我试图找到其他描述来隐藏它们，但这失败了！

$(".description").not(this).next(".description").removeClass("show")

有人能帮忙吗？

Answer 1

将第 4 行更改为：

$(".description").removeClass("show"),

由于您是新的尚未显示，因此将它们全部关闭并不重要。

Answer 2

$(".description").removeClass("show"),
$(this).next(".description").toggleClass("show");

更新的小提琴

Answer 3

这应该照顾它：http: //jsfiddle.net/SMLwc/7/

$(document).ready(function () {

  $(".more").bind("click", function () {
    $(this).next(".description").toggleClass("show")
      .parent().siblings().find(".description").removeClass("show");
  });

  $(".close").bind("click", function () {
    $(this).parent(".description").toggleClass("show");
  });

});