我如何使用 Javascript 切换隐藏或显示 div 和类？

Question

嗨，我只是希望能够通过类分别切换隐藏/显示 div。

我的 div 是 ul.post_controls

Answer 1

编辑 抱歉，我没有意识到您没有提到 jQuery - 它听起来很像一个 jQuery 问题。同时，如果您正在考虑使用像 jQuery 这样的 JavaScript 框架，请查看这里的生活有多简单：http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery。

---

您几乎已经说过了：

$('ul.post_controls').toggle();

这是参考：http://api.jquery.com/toggle/。

---

这就是我设置它的方式，以便在单击按钮时 uls 切换：

$(document).ready(function () { // Need DOM to be ready
    $('#myButton').click(function () { // Attach click event handler
        $('ul.post_controls').toggle(); // Toggle the ul when clicked
    });
});

假设您有一个 ID 为“myButton”的元素。

Answer 2

非 jQuery： http://www .randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/

Answer 3

/*
 * cssjs
 * written by Christian Heilmann (http://icant.co.uk)
 * eases the dynamic application of CSS classes via DOM
 * parameters: action a, object or name o and class names c1 and c2 (c2 optional)
 * actions: swap exchanges c1 and c2 in object o
 *          add adds class c1 to object o
 *          remove removes class c1 from object o
 *          toggle turns class c1 off if it is currently on and vice-versa
 *          check tests if class c1 is applied to object o
 * example: cssjs('swap',document.getElementById('foo'),'bar','baz');
 */

function cssjs(a,o,c1,c2)
{
    if (o) {
        switch (a){
            case 'swap':
                o.className=!cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);
                break;
            case 'add':
                if(!cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;}
                break;
            case 'remove':
                var rep=o.className.match(' '+c1)?' '+c1:c1;
                o.className=o.className.replace(rep,'');
                break;
            case 'toggle':
                cssjs('check',o,c1) ? cssjs('remove',o,c1) : cssjs('add',o,c1);
                break;      
            case 'check':
                return new RegExp('\\b'+c1+'\\b').test(o.className);
        }
    }
}o

Answer 4

http://rijamedia.com/博客/2011/01/simple-jquery-hideshow-elements-with-toggle-and-slidetoggle/