jquery - 向上/向下滑动

Question

我有这个标记

<div id="content" >
      <h1><a href="#">Sample 1</a></h1>
      <img src="" alt="sample 1" />

       <h1><a href="#">Sample 2</a></h1>
      <img src="" alt="sample 2" />

       <h1><a href="#">Sample 3</a></h1>
      <img src="" alt="sample 3" />

       <h1><a href="#">Sample 4</a></h1>
      <img src="" alt="sample 4" />
</div>

我希望所有图像在页面加载时隐藏，然后当我单击每个“h1”时，它的图像向下滑动，当我再次单击它时，它向上滑动。1-考虑到当我点击“h1”时，我不希望所有图像上下滑动，而只是相关图像上下滑动。

请帮帮我

Answer 1

它应该像这样简单:

//On DOM ready...
$(function () {

    //Hide all `img` elements...
    $("img").hide();

    //Bind click event handler to `#content`, responds to clicks on `h1`
    $("#content").on("click", "h1", function () {

        //Find the immediately following sibling and slide it up/down
        $(this).next().slideToggle();
    });
});

请注意，上述内容利用了事件委托(delegate)，因此只存在一个事件处理程序，而不是每个 h1 元素都有一个事件处理程序，这样效率更高。

引用文献:

• .on()
• .next()
• .slideToggle()
• .hide()

我建议您花一些时间阅读 jQuery API 并了解它。通过查看可用的方法，应该不难理解上述内容。