jQuery-在默認情況下隱藏的單擊時切換嵌套div

Question

我有一個鏈接，單擊該鏈接將在其下面顯示一個div。 div默認是隱藏的。

在該div內部，有一個相同的嵌套設置-單擊該鏈接將在其下面顯示一個div。

問題是，當默認情況下隱藏嵌套div時，我的jquery不會在嵌套鏈接上注冊點擊。 如果默認情況下未隱藏嵌套的div，則一切正常。

另一個問題是-下面將出現多個塊實例。 因此，可能有4個“外部數據” div，每個div都有自己的“內部數據” div。 單擊該鏈接時，它應該只隱藏相應的“外部數據”類，而不是所有“外部數據”類。 此方面當前可以正常工作。

我該如何解決？ 這是我的代碼-

 $('.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; }); 

 .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切換語句

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>