1

私は次のようにdivタグで何かを試しました、

  <style type="text/css">
    #hello{
        visibility: visible;
        cursor: pointer;
        position: absolute;
    }
    #list{
        visibility: hidden;
        cursor: pointer;
        position: absolute;
        top: 30px;
        z-index:  1;
        background-color: aqua;
    }
    #second{
            position: absolute;
    }
</style>
<div id="hello" onclick="{if(list.style.visibility=='hidden'){list.style.visibility='visible';}else{list.style.visibility='hidden'};}">Hello user</div><br/>
      <div id="second">Welcome to smartdata</div>
      <div id="list">
          <a href="index.jsp">Home</a> <br/>
          <a href="#" onclick="{alert('You are going to signout');}">SignOut</a> <br/>
      </div>

正常に動作していますが、問題は最初のクリックでリストが表示されないことです。私のコードに何か問題がありますか??

4

6 に答える 6

2

仕組みが原因で、コードが期待どおりに機能しませんelement.style。

element.style のこの MDN リンクを確認してください: https://developer.mozilla.org/en/DOM/element.style

style プロパティは CSS カスケードで style 属性によるインライン スタイル宣言と同じ (かつ最高の) 優先度を持つため、特定の要素にスタイルを設定する場合に便利です。

ただし、要素のインライン スタイル属性で設定された CSS 宣言のみを表し、セクション内のスタイル ルールや外部スタイルなど、他の場所のスタイル ルールに由来するものではないため、要素のスタイル全般について学習するのには役立ちません。シーツ。

そのため、最初にコードを実行したときに、外部element.style.hiddenCSS シートで宣言されていても、スタイル宣言は空のままであり、追加のチェックを実行する必要があります。

if (!list.style.visibility || list.style.visibility === 'hidden') {...}

フィドルを見て動作を確認できます: http://jsfiddle.net/Kk6TJ/1/

また：

  1. ===変数の型を変換せずに厳密な比較を実行するには、トリプル イコールを使用することをお勧めします。
  2. イベント ハンドラに中かっこは必要ありません。彼らがスコープを作成することを望んでいたなら、そうではありません! JavaScript の関数のみがスコープを持ちます。
于 2012-06-11T06:25:10.837 に答える
2

list.style.visibility=='hidden'最初のクリックでの虚偽の説明

これを試して

{if(list.style.visibility=='hidden' || list.style.visibility='')
于 2012-06-11T06:16:32.167 に答える
1

これは、if..else が正しくないためです。意思決定ステートメントの並べ替えにより動作が修正され、最初のクリックでメニュー項目が表示されるようになりました。

また、スクリプトを実行して firebug コンソールで見ると、最初のクリックで JavaScript コードが警告をスローしていることがわかります。

ここに画像の説明を入力

コードを更新しました -

     <style type="text/css">
    #hello{
        visibility: visible;
        cursor: pointer;
        position: absolute;
    }
    #list{
        visibility: hidden;
        cursor: pointer;
        position: absolute;
        top: 30px;
        z-index:  1;
        background-color: aqua;
    }
    #second{
            position: absolute;
    }

</style>

<script type="text/javascript">

function Clickme()
{
var list = document.getElementById('list');

if(list.style.visibility=='visible')
{
list.style.visibility='hidden';
}
else
{
list.style.visibility='visible'
}
}
</script>
<div id="hello" onclick="Clickme();">Hello user</div><br/>
      <div id="second">Welcome to smartdata</div>
      <div id="list">
          <a href="index.jsp">Home</a> <br/>
          <a href="#" onclick="{alert('You are going to signout');}">SignOut</a> <br/>
      </div>
于 2012-06-11T06:38:38.773 に答える
0

スタイル タグと css ファイルで定義されたスタイルは element.style.property プロパティにはありません。要素のスタイルがインライン<element style="property:value;">または明示的に設定されている場合に使用できます。element.style.property = value;

スタイル タグ/シートで定義された要素のスタイルを取得するには、window を使用します。getComputedStyle (要素、null)。getPropertyValue (プロパティ);`

したがって、リストのスタイルをインライン化するか、getComputedStyle getPropertyValue を使用するかlist.style.visibility、最初のクリックで空になるという事実を使用することができます。

于 2012-06-11T06:27:42.830 に答える
0

このようなものに行く -

if(list.style.visibility=="visible")
{
   list.style.visibility="hidden";
}
else
{
   list.style.visibility="visible"
}
于 2012-06-11T13:26:16.173 に答える