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

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

<强>参考：

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

Answer 2

使用过多的<h1>元素并非SEO友好，因此请使用<h2>！

jsBin demo

$('#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) ;

Answer 3

你可以尝试

用于隐藏所有图像

$("img").hide();

显示h1旁边的图片，点击了

$("h1").click(function(){ 
      $(this).next('img').slideToggle();
});

Answer 4

也可以这样做：

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

向上/向下滑动

4 个答案:

jsBin demo