我试图在WordPress帖子中直接使用类似于我在这里创建的小提琴的东西http://jsfiddle.net/t304o8aL/

我读到WordPress不喜欢使用$ 所以我用jQuery

然后使用文本编辑器放置以下代码

<div class="show_hide"><img id="aImg" class="aligncenter size-full wp-image-1170 im" src="http://lorempixel.com/400/200/nature" alt="a-series-main" /></div>

<div class="slidingDiv"><img id="aInfo" class="aligncenter size-full wp-image-1171" src="http://lorempixel.com/400/200/food" alt="a-series-detail" /></div>

<script> 
jQuery(window).load(function(){
jQuery(".slidingDiv").hide();
jQuery(".show_hide").show();

jQuery(\'.show_hide\').click(function(){
    jQuery(this).next().slideToggle();
});


jQuery(\'.slidingDiv\').click(function(){
    jQuery(\'.slidingDiv\').slideUp();
});
});
</script>

jQuery正在文档的头部加载，但在源代码中<script> 标记正在包装为多个<p> 我不知道如何阻止这种情况发生。

<p><script>
jQuery(window).load(function(){
jQuery(".slidingDiv").hide();
jQuery(".show_hide").show();</p>
<p>jQuery(\'.show_hide\').click(function(){
    jQuery(this).next().slideToggle();
});</p>
<p>jQuery(\'.slidingDiv\').click(function(){
    jQuery(\'.slidingDiv\').slideUp();
});
});
</script></p>

提前感谢您的帮助！

<script> jQuery(window).load(function(){ jQuery(".slidingDiv").hide(); jQuery(".show_hide").show(); jQuery(\'.show_hide\').click(function(){ jQuery(this).next().slideToggle(); }); jQuery(\'.slidingDiv\').click(function(){ jQuery(\'.slidingDiv\').slideUp(); }); });</script>