Question

我有：

<div class="papa-div">
    <div class="child-a">
          <!-- content of deal-header -->
    </div>
    <div class="child-b">
          <!-- content of deal-body -->
    </div>
</div>

<div class="papa-div">
    <div class="child-a">
          <!-- content of deal-header -->
    </div>
    <div class="child-b">
          <!-- content of deal-body -->
    </div>
</div>

每次重新加载页面时，块数是随机的。

目标：

当我按下任何.child-a或.child-b时，如果已关闭则会打开，如果已打开则会关闭。一个.child-a的{{1}}和.child-b可以（1）打开，或者（2）只打开其中一个，或者（3）都关闭。

但是，当我点击.papa-div的任何其他实例的.child-a或.child-b时，我希望所有其他.papa-div和.child-a所有其他.child-b { {1}}块被关闭，但点击的任何.papa-div或.child-a（在新.child-b内）都应该被打开。

换句话说，我想要手风琴效果，但考虑到每个手风琴乐队都有2个＆＃34;子块＆＃34; （即＆＃34; child-a＆＃34;和＃34; child-b＆＃34;），每个都可以彼此独立地打开/关闭。

目前我为.papa-div和.child-a分别提供了两个类似的jquery click（），例如：

.child-b

这些块中的每一个都会导致$('.child-a').click(function(e) { p = $(this).parents('.papa-div'); ch = deal.find('.child-a'); ch.addClass("opened"); closeDivs(p, ch); });。

在函数内部我检查了几次function closeDivs(p,ch) {...}，这是在代码中编写的很多手动操作，非常简单。任何想法如何使它简短？感谢

Answer 1

通过向papa div添加一个额外的类（例如selected），您可以删除其子项的所有打开的实例，无论其类型（child-a或child-b）

$('.papa-div > div').click(function(e) {
    $('.papa-div.selected') 
  .not( $(this).toggleClass('opened').parent().addClass('selected'))
  .removeClass('selected').children().removeClass('opened');
});

以上是做什么的： $('.papa-div.selected')...removeClass('selected').children().removeClass('opened')从当前选定的papa-div中删除selected，并从其子项中删除所有opened类。

.not(...)跳过当前的papa div：$(this).toggleClass('opened').parent().addClass('selected')切换单击的div并一次性选择其父级。由于链的末尾返回选定的父级，因此可以直接在not()

中使用

示例：

＆＃13;

$('.papa-div > div').click(function(e) {
	$('.papa-div.selected')
  .not(	$(this).toggleClass('opened').parent().addClass('selected'))
  .removeClass('selected').children().removeClass('opened');
});

＆＃13;

.papa-div > div{  
  width:50px;
  height:10px;
  background-color:yellow;  
  border:1px solid black;
}

.papa-div > .opened{
  background-color:blue;
  height:50px;
}

.selected{
  border:2px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="papa-div">
    <div class="child-a">
          <!-- content of deal-header -->
    </div>
    <div class="child-b">
          <!-- content of deal-body -->
    </div>
</div>

<div class="papa-div">
    <div class="child-a">
          <!-- content of deal-header -->
    </div>
    <div class="child-b">
          <!-- content of deal-body -->
    </div>
</div>

＆＃13;

Answer 2

您可以尝试这样的事情：

$('.papa-div').removeClass('flagged');
$('.child-a').parent().addClass('flagged');
$('.papa-div:not(.flagged) .child-a, .papa-div:not(.flagged) .child-b').removeClass('opened');
$(this).toggleClass('opened');

在这里，首先我从每个父div中删除类flagged。

然后我将flagged类添加回我正在点击的孩子的父div。

然后我从不属于被点击子项的父级的每个其他子div中删除类opened。

最后我将opened课切换到当前点击的孩子

jquery ToggleSlide div-parent中的2个div-children中的任何一个（重复）

2 个答案: