0

下面的代码是一个链接，单击该链接将打开和关闭最初隐藏的 div。除了必须在第一个实例中单击两次链接才能打开它之外，它工作正常。这不是一个大问题，但如果可以使 div 在第一次单击时打开，那就太好了。

切换Div.js

function toggleDiv(elem, eventType, handler) {
    if (elem.addEventListener) {
        elem.addEventListener(eventType, handler, false);
    } else {
        elem.attachEvent('on' + eventType, handler);
    }
}

toggleDiv(window, 'load', function() {
    var link = document.getElementById('myMagicLink'),
        div = document.getElementById('foo');
    toggleDiv(link, 'click', function() {
        if (!link) return true;
        if (div.style.display == "none") {
            div.style.display = "block"
        } else {
            div.style.display = "none"
        }
        return true;
    });
});

索引.html

<body>
<a id="myMagicLink" href="http://www.google.com/">My Magic Link</a>
<div id="foo">Opens a div</div>
<br>
End of page
<br>
<script language="JavaScript" type="text/javascript" src="toggleDiv.js"></script>
</body>
4

3 回答 3

1

我在切换 ASIDE 标签的显示值时遇到了同样的问题。从“无”切换到“内联”并再次返回在第一次单击时不起作用。在我的 CSS 文件中，显示设置为“无”。在我的脚本中，我将“无”更改为“”（据我所知，这似乎意味着“默认”）。以下代码现在对我来说很好。

    var x = document.getElementsByTagName("aside")[0];
if (x.style.display == "")
{
    x.style.display = "inline"; 
}
else
{
    x.style.display = "";   
}

当我在 Firefox 开发人员工具中看到 CSS/实际值时，我明白了这一点：“aside”显示为带有 CSS 属性，但“元素”首先显示为没有属性。第一次单击时，“元素”被分配了一个“显示”属性设置为“无”。

于 2015-12-20T12:32:20.060 回答
0

不知道你遇到了什么麻烦......这在Chrome中对我来说完美无缺。

我确实更改了链接的 url 以反映回同一个文档，但是 divfoo隐藏并重新出现。

几个样式说明：与其设置display = "block"，不如说它display = ""可以恢复到默认值。

此外，我还包括了一个 preventDefault 函数。您的使用return true将适用于 DOM0 样式的事件处理，但它不适用于attachEvent/addEventHandler代码。这正确地防止了链接被跟踪。

<html>
<head>
<title>Test</title>
<script>
function toggleDiv(elem, eventType, handler) {
    if (elem.addEventListener) {
        elem.addEventListener(eventType, handler, false);
    } else {
        elem.attachEvent('on' + eventType, handler);
    }
}


toggleDiv(window, 'load', function() {
    var link = document.getElementById('myMagicLink'),
        div = document.getElementById('foo');
    toggleDiv(link, 'click', function(e) {
        if (!link) return cancelDefaultAction(e);

        if (div.style.display == "none") {
            div.style.display = "block"
        } else {
            div.style.display = "none"
        }       
        return cancelDefaultAction(e);
    });
});

function cancelDefaultAction(e) {
 var evt = e ? e:window.event;
 if (evt.preventDefault) evt.preventDefault();
 evt.returnValue = false;
 return false;
}   

</script>


<body>
<a id="myMagicLink" href="#">My Magic Link</a>
<div id="foo">Opens a div</div>
<br>
End of page
<br>

</body>
</html>
于 2012-09-05T05:44:42.573 回答
0

抱歉，对于非常简单的事情来说似乎有点复杂，除非您有特定的设计；但这应该同样有效：

小提琴

<html>
<head>
    <script language="JavaScript" type="text/javascript">

    var toggled = false;
    function toggleDiv()
        {
           if(toggled)
             {
               document.getElementById('foo').style.display = '';
               toggled = false;            
             }       
           else
           {
               document.getElementById('foo').style.display = 'none';
               toggled = true;
           }
        }
    </script>
    </head>
<body>
<a id="myMagicLink" href="http://www.google.com/" onClick='toggleDiv()'>My Magic Link</a>
<div id="foo">Opens a div</div>
<br>
End of page
<br>
</body>
</html>

​</p>

于 2012-09-05T05:59:39.517 回答