点击隐藏或者显示指定内容
  • 2年前
  • 点击隐藏或者显示指定内容639
  • 作为刚刚接触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"]

  • 联系我们
  • 有任何疑问欢迎联系我们
  • WP新手学园
  • 点击隐藏或者显示指定内容
  • 邮箱:2830776172#qq.com(#换成@)
  • 回复时间:9:00-19:00
  • 如果提问.请图文并茂,详细描述问题
  • 点击隐藏或者显示指定内容
  • 微信号:wpxsxy_official
  • 仅支持付费解决问题
  • *并非所有问题都会被回复
  • 点击隐藏或者显示指定内容
  • QQ:2830776172
  • 回复时间:9:00-19:00
  • QQ仅支持付费提问,时间有限,尽情谅解
  • 点击隐藏或者显示指定内容
  • QQ群:198768181
  • 有问题可以进去提问,寻求群友帮助
  • *并非所有问题都会被回复
  • 点击隐藏或者显示指定内容
  • 咸鱼:WP新手学园
  • 如果对于直接交易不放心,可以走闲鱼
  • *咸鱼价格不作为最终交易价格
  • 备案号:鄂ICP备2021011647号-1