Question

如何将我的选择器设置为特定于多个重复结构中的每个h1和main。我需要能够点击一个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

您需要在触发器功能中引用this，然后将DOM遍历到您显示的内容：

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

此外，您可能希望一些CSS最初隐藏您的<main>内容：

main {
    display:none;
}

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

Answer 2

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

试试这个：

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

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

请参阅Fiddle

Answer 3

您可能需要以下内容：

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

用于multipe slideToogle的Jquery选择器

3 个答案: