2

我有这个标记

<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”时我不希望所有图像都向下和向上滑动，而只是相关图像向上和向下滑动。

请帮帮我

4

4 回答 4

3

它应该像这样简单：

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

请注意，上面利用了事件委托，因此只有一个事件处理程序存在，而不是每个h1元素一个，这样更有效。

参考资料：

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

于 2012-07-17T08:22:28.257 回答
3

使用太多<h1>元素对 SEO 不友好，所以使用<h2>!

jsBin 演示

$('#content h2').next('img').hide();

$('#content h2').click(function( e ){
    e.preventDefault();     // prevent default anchor behavior
    var img = $(this).next('img');
    var isVisible= img.is(':visible') ? img.slideUp() : ($('img').slideUp()) (img.slideDown());
});

此代码允许您切换打开的图像，但也可以重新关闭打开的图像！

我认为您可能难以理解的代码可能是三元运算符。
好像：

var var_name = statement ? (do this if stetement is true) : (do this if false) ;

于 2012-07-17T08:31:56.863 回答
1

你可以试试

用于隐藏所有图像

$("img").hide();

用于在 h1 旁边显示图像，点击

$("h1").click(function(){ 
      $(this).next('img').slideToggle();
});
于 2012-07-17T08:23:39.793 回答
0

也可以这样做：

$(document).ready(function(){
    $('#content img').hide();
    $('#content a').click(function(evt){
        $(this).parent().next('img').slideToggle();
        //alert($(this).parent()[0].outerHTML); // parent is H2 test
        evt.preventDefault(); // not follow clicked link
    });
});
于 2012-07-17T08:35:58.620 回答