Question

我有一些DIVS如下所示：

    <div class="click">
    <div class ="title">
    <div class ="content">
    <div class="click">
    <div class ="title">
    <div class ="content">
    <div class="click">
    <div class ="title">
    <div class ="content">
    <div class="click">
    <div class ="title">
    <div class ="content">
    <div class="click">
    <div class ="title">
    <div class ="content">

我想要做的是当你点击内容DIV时，下面的两个兄弟（点击和内容）将切换，以便它们显示在页面上，所有其他标题和内容DIVS将被隐藏。我试过这个：

$(".click").click(function () {

         $(this).next().next().toggle();

    });

这显示了点击DIV点击下方的内容DIV。如何修改它以便隐藏其他DIV，因为当您单击另一个DIV时，其他DIV保持打开状态。另外我如何选择标题和内容兄弟姐妹？我认为.next（）。next（）会选择两者，但它只获得活动DIV的第二个兄弟。

Answer 1

首先使用hide隐藏所有元素

 $(".click").click(function () {
    $('.title').hide();
    $('.content').hide();
    $(this).next().toggle();
    $(this).next().next().toggle();

});

Answer 2

您可以使用$('.content,.title')选择器获取所有内容和标题元素。使用非选择器后隐藏元素以及需要切换的内容元素对象以将其从集合中过滤掉：

$(".click").click(function () {
  var toggleelements = $(this).next().next().add($(this).next());
  $('.content,.title').not(toggleelements).hide();
  toggleelements.toggle(); 
});

<强>

切换下两个sibbling并隐藏所有其他sibbling

2 个答案:

<强> Working Demo