javascript - 通过单击其中一个元素来切换多个元素的状态

Question

我的页面上有以下结构:

<div class="mycontainer">
  <div class="mysubclass">
    <div class="myheader">header 1</div>
    <div class="mycontent">content 1</div>
  </div>
  <div class="mysubclass">
    <div class="myheader">header 2</div>
    <div class="mycontent">content 2</div>
  </div>
  <div class="mysubclass">
    <div class="myheader">header 3</div>
    <div class="mycontent">content 3</div>
  </div>
</div>

我需要获得以下行为: 页面加载后，所有这些都被关闭。当我单击第一个 mysubclass 时，其 myheader 和 mycontent 应该会激活其他类(class)。当我再次点击它时，它应该被删除。所有其他元素不应成为事件类。 当我单击第一个 mysubclass 时，其 myheader 和 mycontent 应该再次激活其他类(class)。当我单击第二个 mysubclass 时，应从第一个 mysubclass 中删除事件类，并将其添加到第二个(单击的)mysubclass 的元素中.

事实上，我需要用内容模拟打开和关闭元素，因此当它关闭时，内容不可见，当我单击元素时，它会获得类 active 并显示内容。

我的 JQuery 代码如下:

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

  if ($(".myheader").hasClass("activ") && $(".mycontent").hasClass("activ")) {
    $(".myheader").removeClass("activ");
    $(".mycontent").removeClass("activ");
  } else {
    $(".myheader").siblings().removeClass("active");
    $(".mycontent").siblings().removeClass("active");
    $(".myheader").addClass("active");
    $(".mycontent").addClass("active");
  }
});

如何在不更改 html 代码的情况下实现此行为？ 这是我的这个问题的例子:JSFiddle example .

Answer 1

这应该有效

 $(".mysubclass").click(function(e) { 
   if ($(this).find(".myheader").hasClass("active") && $(this).find(".mycontent").hasClass("active")) {

    $(this).find(".myheader").removeClass("active");
    $(this).find(".mycontent").removeClass("active");
} else {
    $(".mycontainer .active").removeClass("active");
    $(this).find(".myheader").addClass("active");
    $(this).find(".mycontent").addClass("active");
  }
});

https://jsfiddle.net/po3Lj3rm/13/