0

カスタムの Wordpress テンプレートがあります。これはおそらく本当にばかげた質問ですが、ページ（投稿ではない）に4つの画像が必要です。それらをクリックすると、対応する非表示のdivがスライドして開き、画像が再度クリックされるとスライドして閉じます。

これは別のscripts.jsファイルにあります（テンプレートfooter.phpファイルで正しく呼び出されます-そこにあるので、ページの読み込みが速くなります...）：

$(document).ready(function(){

$('#wd-click').click(function(){
    $('#wd-info').slideToggle();
});

$('#seo-click').click(function(){
    $('#seo-info').slideToggle();
});

$('#mobo-click').click(function(){
    $('#mobo-info').slideToggle();
});

$('#gd-click').click(function(){
    $('#gd-info').slideToggle();
});

});

そして、私はこれをページに持っています：

<a href="javascript:void(0)" id="wd-show"><img class="size-full wp-image-93" alt="" src="image.jpg" width="750" height="75" /></a>

<div class="info-div" id="wd-info" style="display: none;">...</div>

私は何が欠けていますか？

ありがとう

4

5 に答える 5

0

これには、ライトボックスhttp://lokeshdhakar.com/projects/lightbox2/ または twitter ブートストラップhttp://getbootstrap.com/javascript/#modalsを試すことができます 。非常に簡単かつ迅速に展開できます。

于 2013-10-04T15:19:24.287 に答える
0

#wd-click にクリック イベントを追加しますが、リンクは #wd-show で識別されます

于 2013-10-04T15:19:54.640 に答える
0

そこにあるので、ページの読み込みが速くなります...):

コードを短くすることでページのサイズを小さくできますが、影響は非常に小さくなります。

$(document).ready(function(){
  $('#wd-click').click(function(){
      $('#' + this.id.split('-')[0] + '-info' ).slideToggle();
  });
})
于 2013-10-04T15:20:32.360 に答える