Question

我有一个链接，点击后会显示下面的div。默认情况下隐藏div。

在div的内部，有一个相同的嵌套设置 - 一个链接，当点击时，将显示它下面的div。

问题是，当默认隐藏嵌套div时，我的jquery不会在嵌套链接上注册点击。如果默认情况下未嵌套嵌套div，则一切正常。

另一个皱纹 - 下面会有多个块的实例。所以可能有4＆＃34;外部数据＆＃34; divs，每个都有自己的＆＃34;内部数据＆＃34; div的。单击链接时，它应该只隐藏相应的＆＃34;外部数据＆＃34;并非所有＆＃34;外部数据＆＃34;类。这方面目前正常运作。

我该如何解决这个问题？这是我的代码 -

＆＃13;

$('.outer-toggler').click(function() {
  $(this).parent().find('.outer-data').toggle();
  return false;
});

// inner div toggle, does not register clicks
$('.inner-toggler').click(function() {
  $(this).parent().find('.inner-data').toggle();
  return false;
});

＆＃13;

.outer-data,
.inner-data {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="outer-toggler" href="#">outer link 1</a>
<div class="outer-data">
  ...
  <a class="inner-toggler" href="#">inner link 1</a>
  <div class="inner-data">
    ...
  </div>
</div>

<a class="outer-toggler" href="#">outer link 2</a>
<div class="outer-data">
  ...
  <a class="inner-toggler" href="#">inner link 2</a>
  <div class="inner-data">
    ...
  </div>
</div>

＆＃13;

我发现这个问题看起来很相似，但在我的情况下，链接默认是隐藏的，而他的下拉框却没有，所以他的更改至少仍然触发了事件 - Nested jQuery toggle statements

Answer 1

使用$(this).next().toggle();作为切换目标是下一个兄弟

$('.outer-toggler').click(function() {
  $(this).next().toggle();
  return false;
});

// inner div toggle, does not register clicks
$('.inner-toggler').click(function() {
  $(this).next().toggle();
  return false;
});

.outer-data,
.inner-data {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="outer-toggler" href="#">outer link 1</a>
<div class="outer-data">
  ...
  <a class="inner-toggler" href="#">inner link 1</a>
  <div class="inner-data">
    ...
  </div>
</div>

<a class="outer-toggler" href="#">outer link 2</a>
<div class="outer-data">
  ...
  <a class="inner-toggler" href="#">inner link 2</a>
  <div class="inner-data">
    ...
  </div>
</div>

Jquery - 在默认情况下单击隐藏时切换嵌套div

1 个答案: