1

Javascript で基本的な折りたたみを作成しようとしているdivときに、次の奇妙なバグに遭遇しました。このコードで：

<html> 
    <head> 
        <style type="text/css">
            .hidden
            {
                display: none;
            }
        </style>
        <script type="text/javascript">
            function toggle()
            {
                var element = document.getElementById('hidden1');
                if(element.style.display === 'none')
                {
                    element.style.display = 'inline';
                }
                else
                {
                    element.style.display = 'none';
                }
            }
        </script> 
    </head> 
    <body>
        <a onclick="toggle()">Click me</a><br /> 
        <div id="hidden1" class="hidden">
            stuffs
        </div>
    </body>
</html>

私はそれが表示されるように動作することを期待していましたdiv.divは奇妙な量子フラックスにあるように見えることに気付きました。メソッドの先頭に次のアラートを追加する場合toggle():

alert('\'' + document.getElementById('hidden1').style.display + '\'');

I'm given ''、つまり空です。ただし、まったく同じ場所でこれを行うと、次のようになります。

console.log(document.getElementById('hidden1').style);

コンソールには次のように表示されます。

[object CSS2Properties]

次のプロパティを使用します。

0: "display"
...
display: "none"

ただし、 の CSS 宣言がの.hiddenにインラインで移動されると、コードは期待どおりに機能します。なぜこれが起こっているのか誰にも分かりますか？divstyle

また、Centos と Windows の両方で apache を使用し、Firefox 24、Chrome 30、および最新の Opera ブラウザーで問題を再現できない人がいるかどうかも知りたいです。

4

4 に答える 4

0

問題は、2 つの異なる方法でスタイルを設定していることです。hiddenクラスを非表示にする div にクラスを追加しましたが、Javascript を使用して CSS プロパティを手動で設定しています。この 2 つの競合により、おかしな「量子」動作が発生します。

jQuery を使用して可視性を切り替える (単一の関数でこれを行うことができます) か、jQuery を使用したくない場合は、ここの最初の回答の指示に従うことをお勧めします。

于 2013-10-18T18:28:37.590 に答える
0

別のオプションは、スタイル .hidden を削除し、ドキュメントの読み込み時に関数 toggle() を呼び出すことです。

于 2013-10-18T18:49:55.870 に答える