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）「未定義」の値をnoneにデコードします。これは、最初は値がnoneになることがわかっているためです。

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

どちらもかなり醜い解決策ですが、機能します。

于 2012-10-22T08:32:30.037 に答える
3

インラインである必要がある場合は、このデモを行う必要があります

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

そしてこれ（noneのテストを逆にしてnotblockのテストにする）

<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が見逃した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 に答える