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> 

但爲了樣式目的，我需要使用以下HTML，這會導致.trigger和slideToggle無法工作。

  <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，進入格。

變化：

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

到

$(this).toggleClass("active").parent().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