允许访问者显示/隐藏一种内容

时间:2011-12-26 作者:Martin-Al

我对文章有三个不同的级别,Level1、level2和level3。在我主页的主要部分,我显示了所有三种类型的文章,但我希望用户可以选择隐藏/删除Level3文章。

这些级别作为meta\\u值保存在数据库中。每个岗位都有一个班级;<article class="news-entry Level3">

那么,问题是:我如何才能让访问者轻松地显示/隐藏Level3文章?最好不要重新加载页面。也许是一个简单的display:none, 但我不知道该怎么做。

谢谢

1 个回复
最合适的回答,由SO网友:Brooke. 整理而成

JavaScript是您的朋友!更具体地说,jQuery是您的朋友。

你可以帮我们wp enqueue script 然后这样做:

将此添加到主题功能中。php

<?php
function my_scripts_method() {
    wp_enqueue_script(\'jquery\');            
}    

add_action(\'wp_enqueue_scripts\', \'my_scripts_method\'); //
?>
然后,要么在标题中,要么通过编写自定义项。js文件,然后查询它使用以下

jQuery(document).ready(function($) {
     $(\'.hide_level3_button\').click(function(){
          $(\'.Level3\').toggle();
         return false;
   });
});
然后给你的切换按钮一类hide_level3_button 你可以走了。

JS小提琴:http://jsfiddle.net/BandonRandon/nzE7F/

UPDATE: 您还可以使用fadeToggle() 为了让它们看起来更好http://jsfiddle.net/BandonRandon/nzE7F/1/

EDIT要添加使其在页面加载时工作,我将添加jQuery cookie plugin 并将javascript更改为:

    jQuery(document).ready(function($) {
    if ($.cookie("hide_level3") == "true") { //check for cookie
        $(\'.Level3\').hide(); //hide the level
    }

    $(\'.hide_level3_button\').click(function() {
        $(\'.Level3\').fadeToggle(); //toggle level
        $.cookie(\'hide_level3\', \'true\'); //set the cookie
        return false;
    });
});

http://jsfiddle.net/BandonRandon/nzE7F/3/

结束

相关推荐

Adding goodies to themes

如何在主题更新时向Arjuna-X等主题添加内容而不丢失?儿童主题是一种很好的方式,还是有其他选择?如果新版本的主题对我添加的功能具有本机支持,该怎么办?