作为刚刚接触WordPress的新手来说,不了解JS或者JQ,这方面确实是比较难以去实现,但是如果你了解JS或者JQ,那么应该不是问题。
我个人方面也是遵从不会就谷歌和百度,只有自己去搜索可能才会印象深刻一点。
以下图为例,是一个群友询问的内容:
按照图片中的要求,实现的方法其实很简单:
以下方代码为例:
需要显示的内容
这里是通过onclick时间来触发JS函数实现点击出现,再次点击则隐藏的效果,那么对应的onclick绑定函数如下:
function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }
上面的代码是最基本的方式,如果你还有额外的需求或者需要判断的内容就看你自己的需求进行添加了。
上面的代码来自: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp ,有需要的朋友可以自行前往了解一下,看看效果。
除了上面的方法,我们同样可以通过Toggle属性来进行处理,以下方代码为例:
Click here
上方定义了两个内容,一个是DIV,对应的点击按钮,一个对应的是图片,对应的点击显示对象,通过JQ代码:
$( "#clickme" ).click(function() { $( "#book" ).toggle( "slow", function() { // Animation complete. }); });
同样可以实现点击一下显示,再点击一下隐藏的功能。
WordPress的二次开发或者自定义修改是一个经验的过程,除了实现原理更多的是了解如何效率或者最优化的显示,共同进步。
上面的代码如果你不会添加也不知道添加到哪里的话,可以查看下面的插件,了解一下: [art id="346" unique_number="art_6a4bff5123264ef09db3140fd66e4160"]