jQuery的multipe slideToogle

Question

选择器如何设置我的选择器是特定于每个h1和主多重复结构。我需要能够点击一个h1并打开包含在同一部分中的HTML。根据javascript的下面，请回答什么var触发器和var内容应该是完成要求。

<section id="side_nav"> 
     <!-- Main --> 
     <section> 
      <header> 
       <h1>Main Header</h1> 
       <a href="#">Call to action</a> 
      </header> 
      <main> 
       <div> 
        <p><span>content</span><span>content</span></p> 
        <p><span>content</span><span class="positive">content</span></p> 
       </div> 
      </main> 
     </section> 
     <!-- First sub --> 
     <section> 
      <header> 
       <h1>First sub header</h1> 
       <p>Content</p> 
      </header> 
      <main> 
       <div> 
        <p><span>content</span><span>content</span></p> 
        <p><span>content</span><span>content</span></p> 
       </div>   
      </main> 
     </section> 
     <!-- Second sub --> 
     <section> 
      <header> 
       <h1>Second sub header</h1> 
       <p>content</p> 
      </header> 
      <main> 
       <div> 
        <p><span>content</span><span>content</span></p> 
        <p><span>content</span><span>content</span></p> 
       </div>   
      </main> 
     </section> 
     <!-- Third sub --> 
     <section> 
      <header> 
       <h1>Third sub header</h1> 
       <p>content</p> 
      </header> 
      <main> 
       <div> 
        <p><span>content</span><span>content</span></p> 
        <p><span>content</span><span>content</span></p> 
       </div>   
      </main> 
     </section> 
    </section> 

我现在的JS是这样的：

$(document).ready(function(){ 
     var trigger = $("h1"); 
     var content = $("main"); 

     trigger.click(function(){ 
      content.slideToggle("slow"); 
     }); 
    }); 

这里为的jsfiddle与我当前的代码：

http://jsfiddle.net/vinicius5581/fLyy931s/

Answer 1

的问题是，你指的是所有您的文档中的<content>元素，而不是指您的旁边的元素0。

试试这个：

$(document).ready(function(){ 
    var trigger = $("h1"); 

    trigger.click(function(){ 
     $(this).parent().next('main').slideToggle("slow"); 
    }); 
}); 

见Fiddle

Answer 2

你可能需要的东西，如：

$(document).ready(function(){ 
    $("h1").click(function(){ 
     $(this).closest('section').find('main').slideToggle("slow"); 
    }); 
}); 

的.closest方法发现，选择相匹配的最接近的父母，抓住你可以找到主要的孩子和你的功能将永远与结构有关。

要扩大为什么你的“这行不通”的评论是错误的：

$(document).ready(function(){ 
    //when you do this... 
    var trigger=$('h1'); 
    //You are saying "grab every h1 on the page" 

    //when you do this... 
    var content=$('main'); 
    //you are grabbing EVERY "main" on the page 

    //so when you do this 
    trigger.click(function(){ 
     //you apply a click handler to every h1 on the page 

     //now once in here when you reference "content" you are actually 
     //referencing EVERY "main" on the page since you already assigned 
     //that collection to a variable outside of the click handler 

     //the reason we all used a variation of this: 

     $(this).closest('section').find('main').slideToggle("slow"); 

     // is because $(this) now points to the specific h1 that was clicked 
     // on, so by navigating the DOM using the available jQuery methods 
     // we can actially get the "main" element that relates to the h1 
    }); 
}); 

基本上你背着一个全球范围内为事件处理程序，并假设它有一些动态的方式来确定上下文。这可能使一些更有意义是这样的：

$(document).ready(function(){ 
    var triggers=$('h1'); 
    //let's call it "triggers" since this will actually return every h1 on the page. 

    triggers.click(function(){ 
     //Grab the parent of the thing that was clicked on so we can find the 
     //right content to toggle 

     var context=$(this).closest('section'); 

     //When you send a second argument in to jQuery like this you tell 
     // it where to look for the elements you've selected 
     var content=$('main',context); 

     //NOW you can use your variable knowing that you have the right 
     //piece of content 
     content.slideToggle("slow"); 
    }); 
}); 

Answer 3

您需要引用this在您的触发功能，然后遍历DOM的内容你是显示：

trigger.click(function(){ 
    $(this).parent().siblings('main').slideToggle("slow"); 
}); 

而且你可能想一些CSS最初隐藏<main>内容：

main { 
    display:none; 
} 

更新小提琴：http://jsfiddle.net/fLyy931s/2/