javascript - 在 Wordpress 页面中切换 DIV

Question

我有一个自定义的 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>

我错过了什么？

谢谢

Answer 1

试试这个(因为 wordpress 经常在 no conflict mode 中运行 jQuery 而不会使用 jQuery 的 $)

jQuery.noConflict()
jQuery(document).ready(function(){
    (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();
    });
    })(jQuery);
});

Demo