Question

html head：

<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（滑动效果，而不是瞬间）？

Answer 1

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

你可以：

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

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

或

2）将“undefined”值解码为none，因为您知道该值最初将为none;

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

两个非常难看的解决方案，但它们都有效。

Answer 2

如果必须内联，则需要执行此操作DEMO

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

和这个（将测试中的任何一个转换为不阻塞的测试）

<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>

以上回答你的问题

UPDATE ：因为看起来你想要jQuery，所以你需要编写代码 - 注意Michal错过的返回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
  });
});

Answer 3

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

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

请参阅此DEMO。

要更改滑动速度和更多信息，请参阅documentation。

Answer 4

隐藏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

如何在第一次点击时切换div显示？

4 个答案: