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 应该会激活其他类。当我再次点击它时，它应该被删除。所有其他元素不应成为活动类。当我第一次点击 mysubclass 时，其 myheader 和 mycontent 应该会再次激活其他类。当我点击第二个 mysubclass 时，应该从第一个 mysubclass 中删除活动类，并将其添加到第二个（单击的） mysubclass 的元素中

实际上我需要使用内容模拟打开和关闭元素，因此当它关闭时，内容不可见，当我点击一个元素时，它会获得类活动并显示内容。< / p>

我的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/

Answer 2

试试这个 -

$('.mysubclass').on('click', function() {
  $('.myheader').not($(this).find('.myheader')).removeClass('active');
  $('.mycontent').not($(this).find('.mycontent')).removeClass('active');

  if (!$(this).find('.mycontent').hasClass("active")) {
    $(this).find('.mycontent').addClass('active');
    $(this).find('.myheader').addClass('active');
  } else {
    $(this).find('.mycontent').removeClass('active');
    $(this).find('.myheader').removeClass('active');
  }
});

.mycontainer {
  padding: 10px;
}
.mysubclass {
  padding: 5px;
  border: 1px solid black;
  border-radius: 5px;
  margin: 5px;
}
.myheader {
  height: 20px;
  padding: 5px;
  border-bottom: 1px solid #ff0000;
  cursor: pointer;
}
.mycontent {
  height: 80px;
  padding: 5px;
  display: none;
}
.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

使用课程active - JSFiddle此处

没有课程active - JSFiddle此处

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

2 个答案: