Question

我有这个代码用于隐藏/显示id的div内容。我需要更改它以通过div类识别内容。我怎么能这样做？

HTML：

<a href="javascript:hideshow(document.getElementById('adiv'))">Click here</a>

的Javascript

function hideshow(which){
                if (!document.getElementById)
                    return
                if (which.style.display=="block")
                    which.style.display="none"
                else
                    which.style.display="block"
            }

Answer 1

如何让它与大多数选择器一起使用

function hideshow(which){

    var elems = document.querySelectorAll(which);

    [].slice.call(elems).forEach(function(el) {
        if ( el.style.display === 'none' ) {
            el.style.display = 'block';
        } else {
            el.style.display = 'none';
        }
    });
}

hideshow('.elements');

或使用jQuery

$('.elements').toggle()

Answer 2

试试这个：

<a href="javascript:void(0);" onclick="hideshow('adiv')" >Click here</a>

function hideshow(which){
    var els = document.getElementsByClassName(which),
        el_node = els[0];
    if (el_node.style.display === "block"){
        el_node.style.display = "none";
    } else {
        el_node.style.display = "block";
    }
}

https://jsfiddle.net/5L8d7ukf/

Answer 3

jQuery解决方案：

<强> HTML

<a class="toggleVisibility">Click here</a>

<强>的jQuery

$(document).on("click", ".toggleVisibility", function() {
    $('.which').toggleClass('hide');
});

<强> CSS

.hide {display:none;}

如果你想从隐藏的项目开始，你可以使用.show和display:block来翻转它。

按类隐藏/显示div内容

3 个答案: