3

画像をクリックすると、別の画像とテキストが表示されるというアイデアでした。これは私が成功しました：

Jクエリ 

$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".show_hide").show();

$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});

});

HTML

  <a href="#" class="show_hide"
   ><img src="images/owl.png" id="owl" width="200" height="200"  alt="owl"></a>


  <div class="slidingDiv">
  Philip to the rescue!! <img src="images/cola.jpg"
     width="256" height="320" alt="cola  Philip">
  <a href="#" class="show_hide">Hide</a></div>

CSS

.slidingDiv {
   height:300px;
   padding:20px;
   margin-top:10px;
}

.show_hide {
   display:none;
}

しかし、複数の画像でこれを行う方法について少し混乱していますか?

たとえば、8 つの異なるクリック可能な画像がある場合、8 つの異なる画像とテキストが表示されます。

そして、それを下げる代わりに上げる方法はありますか？

4

2 に答える 2

3

洗練された解決策は、トグル リンクとトグルされたコンテンツを次のようにラップすることです。

<div class="toggler-wrap">
    <a href="#" class="toggler">Toggle content</a>
    <div class="content">This text can be toggled.</div>
</div>

次に、次のコードで任意のコンテンツ div を切り替えることができます。

$(function(){
    $('.toggler').click(function(event){
        event.preventDefault();
        $(this).parent().find('.content').slideToggle();
    });
});

例については、 http://jsfiddle.net/TW5Eq/を参照してください。楽しく練習しましょう！

于 2012-10-09T20:43:16.430 に答える
0

データ属性を使用して、クラス名を抽象化できます。

<a href="#" data-target="someclass" class="show_hide">

$('.show_hide').click(function(){
     var myClass=$(this).attr('data-target');
     $("."+myClass).slideToggle();
}
于 2012-10-09T20:32:33.927 に答える