jQuery SlideToggleは意味的に隣接していない要素では機能しません

Question

jQuery APIの驚くべきslideToggle();関数を使用しています。私が遭遇してる問題は、私は次のjQueryコードを使って、次の.slide_toggle_containerをターゲットと考えていたということです。

$(document).ready(function() { 
    //Hide (Collapse) the toggle containers on load 
    $(".toggle_container").hide(); 

    //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state) 
    $(".trigger").click(function(){ 
     $(this).toggleClass("active").next(".toggle_container").slideToggle("slow"); 
     return false; //Prevent the browser jump to the link anchor 
    }); 

}); // End of document.ready  

問題は、上記のコードは次のHTML

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget venenatis turpis. Fusce et ante diam, venenatis vestibulum tortor. Nam ultrices accumsan velit sit amet sagittis.</p> 

      <a class="trigger toggle" href="#">Read More</a> 

      <div class="toggle_container">Sliding Content</div> 

で素晴らしい作品ということですしかし、スタイリングのために、私は.triggerとslideToggleが動作しなくなる次のHTMLを使用する必要があります。いくつかの研究から

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget venenatis turpis. Fusce et ante diam, venenatis vestibulum tortor. Nam ultrices accumsan velit sit amet sagittis.<a class="trigger toggle" href="#">Read More</a></p> 

      <div class="toggle_container">Sliding Content</div> 

私の理解では、.triggerが<p>内に含まれ、slide_toggle_containerがDOMで.next()要素として認識されていないため、HTML上の（第二）が動作しないということです。どんな助け？上記の2番目のHTMLシナリオでこの作業を行うにはどうすればよいですか？

Answer 1

parent()メソッドを使用してアンカーの親にアクセスし、次にnextを呼び出してdivにアクセスします。

変更：

$(this).toggleClass("active").parent().next(".toggle_container").slideToggle("slow"); 

へ

$(this).toggleClass("active").next(".toggle_container").slideToggle("slow"); 

Answer 2

この

$(document).ready(function() { 
    //Hide (Collapse) the toggle containers on load 
    $(".toggle_container").hide(); 

    //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state) 
    $(".trigger").click(function(){ 
     $(this).toggleClass("active").closest("p").next(".toggle_container").slideToggle("slow"); 
     return false; //Prevent the browser jump to the link anchor 
    }); 

}); // End of document.ready 

をお試しください