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

あまりにも多くの<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 に答える
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要素ごとに1つではなく、1つのイベントハンドラーのみが存在することに注意してください。これはより効率的です。

参照：

jQuery APIを読んで、それを理解するために時間をかけることをお勧めします。利用可能な方法を見ただけで、上記を理解するのは難しいことではありませんでした。

于 2012-07-17T08:22:28.257 に答える
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 に答える