Question

我有10个div。默认情况下，所有这些的可见性都设置为“hidden”。单击按钮时，它们会显示：

<script>

function fun(x)
{
    document.getElementById(x).style.visibility="visible";
}
</script>
<div id="div1" style="visibility:hidden">div1</div><input type="button" value="click" onclick="fun('div1')">
<div id="div2" style="visibility:hidden">div2</div><input type="button" value="click" onclick="fun('div2')">

。。。有没有办法在fun（）函数中检测div是可见还是隐藏，这样通过检查div的状态（可见/隐藏），只需每次点击按钮就可以隐藏/显示它？

我的第二个问题是（第一个问题已经解决）：假设div1可见，现在我点击第2个按钮，结果div2也会可见，但是div1看起来是隐藏的而不再点击1号按钮等等......怎么样？

Answer 1

尝试

function fun(x)
{
    document.getElementById(x).style.visibility = 
    (document.getElementById(x).style.visibility != "visible") ? "visible" : "hidden";
}

Answer 2

您可以获取属性visibility的值，并将其与可能的值进行比较。

function fun(x)
{
    if( document.getElementById(x).style.visibility == "visible")
         document.getElementById(x).style.visibility = "hidden";
    else
         document.getElementById(x).style.visibility = "visible";
}

如果你可以使用jQuery，那么你可以使用show()，hide()函数，但他们使用display属性而不是visibility。

Answer 3

如果jQuery是您的选项，您可以使用jQuery toggle

然后切换切换显示（不可见）;如果可以，请尝试：

function fun(x) {
    $("#"+x).toggle();
}

用于切换可见性的jQuery解决方案：

function fun(x) {
    var $obj = $("#"+x);
    $obj.css('visibility', $obj.css('visibility')=='hidden'?'visible':'hidden');
}

Answer 4

在jquery中：

if($('#div1').is('visible')) {
//  do something
}

Answer 5

在jQuery中，您可以使用$（x）.is（“：visible”）

function fun(x)
{
   if( $(x).is(":visible") ) {

   }
}

Answer 6

尝试

function toggle(x) {
    var style = document.getElementById(x).style;
    style.visibility = style.visibility == "visible" ? 'hidden' : 'visible'
}

或jQuery等效

function toggle(x) {
    $('#' + x).css(visible, function (_, visibility) {
        return visibility == "visible" ? 'hidden' : 'visible'
    })
}

检查javascript中元素的可见性或显示

6 个答案: