Question

我在点击链接时试图隐藏或显示div。

这是我要展示或隐藏的HTML部分：

<div id="product">
    <div ng-repeat="producto in productos" >     
            <figure class="floating">
              <img  ng-src="{{ producto.image }}" alt="image" class="rcorners3" style='width:100%;' border="0" alt="Null">
              <figcaption> {{ producto.name }}</figcaption>
            </figure>
    </div>
</div>

点击此内容：

<li onclick="isitvisible()" class="guides">

这是我点击时运行的脚本：

<script type="text/javascript">
    function isitvisible() {
        var vale = document.getElementById('product').offsetLeft;

        if (vale <= 0) {
            document.getElementById('product').style.visibility='hidden';
        } else { 
            document.getElementById('product').style.visibility='visible';
        }       
    }         
</script>

div会隐藏但点击后根本不会显示。我认为我没有使用offsetLeft，但不确定。

Answer 1

切换元素的可见性时，

offsetLeft不会改变。

请尝试使用此isitvisible功能：

function isitvisible() {
    // Get a reference to the element's style.
    var style = document.getElementById('product').style;

    if (style.visibility === 'hidden') {
        style.visibility = 'visible';
    } else { 
        style.visibility = 'hidden';
    }       
}

或稍微shorter：

function isitvisible() {
    var style = document.getElementById('product').style;
    style.visibility = (style.visibility === 'hidden') ? 'visible' : 'hidden';       
}

Answer 2

将其更改为：

<script type="text/javascript">
    var style = document.getElementById('product').style;
    function isitvisible() {
        if (style.display=='none') {
            style.display='block';
        } else { 
            style.display='none';
        }       
    }         
</script>

JS函数不会隐藏元素

2 个答案: