0

html头： 

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

    function getStyle() {
        var temp = document.getElementById("cont").style.display;
        return temp;
    }

    function switch01() {
        var current = getStyle();
        if (current == "none") {
            document.getElementById("cont").style.display = "block";
        }
        else {
            document.getElementById("cont").style.display = "none";
        }
    }​

</script>

身体： 

<a href="javascript:switch01('cont')">CONTENT</a>

CSS： 

#cont{
    display: none;
}

加载页面后 - 第一次单击不起作用。第一次点击后 - 一切正常。
另外，我怎样才能缓慢地显示/隐藏 div（具有滑动效果，而不是瞬间）？

4

4 回答 4

5

您第一次获得的值是“未定义”。

你可以：

1）页面加载时通过javascript设置值；

document.getElementById("cont").style.display = "none";

或者

2）将“未定义”值解码为无，因为您知道一开始该值将为无；

var temp = document.getElementById("cont").style.display;
if (temp == "undefined") 
   temp = "none";
return temp;

两个非常丑陋的解决方案，但他们工作。

于 2012-10-22T08:32:30.037 回答
3

如果它必须是内联的，你需要做这个DEMO

<a href="#" onclick="return switch01('cont')">CONTENT</a>

和这个（将 none 的测试反转为 not block 的测试）

<script type="text/javascript" language="JavaScript">
function switch01(objId) {
  var current = document.getElementById(objId).style.display;
  document.getElementById(objId).style.display=(current!="block")?"block":"none";
  return false
}
</script>

以上回答了你的问题

更新：由于您似乎更喜欢 jQuery，因此您需要编写代码 - 请注意 Michal 错过的 return false。

<a href="#" id="toggle">CONTENT</a>

$(function() { // wait for the page to load
  $('#toggle').on("click",function(e) { // when link clicked
    $('#cont').slideToggle(); // slide open or closed
    return false; // or e.preventDefault(); // stop the click executing the href
  });​
});​
于 2012-10-22T08:31:55.027 回答
2

如果你想要幻灯片效果，我的建议是使用 jQuery：

$('#toggle').click(function() {
    $('#cont').slideToggle();
});​

请参阅此演示。

有关更改滑动速度和更多信息，请参阅文档。

于 2012-10-22T08:34:08.400 回答
1

为了隐藏 div .. 你可以看看

     $('cont').hide(); function.

更多相关信息可在此处获得：

     http://api.jquery.com/hide/

     http://api.jquery.com/show/

而对于滑动效果来说，Jquery 在这个部门是一流的。你只需要传递下面给出的参数..它就可以了。

     $("cont").click(function () {
         $(this).hide("slide", { direction: "down" }, 1000);
     });

仅供参考：http ://docs.jquery.com/UI/Effects/Slide

于 2012-10-22T08:57:06.420 回答