0

クリックするとポップアップするサイドバーメニューを備えたこの小さなhtmlアプリを作成しています。2回目のクリック後にのみ機能し始めることを除いて、正常に機能します。最初のクリックでは何も起こりません。

CSS:

#menubalk{
   margin-left: -260px;
}

HTML:

<div id="menubutton">
   <img src="design/images/menu.png" id="menu" onclick="toggle()" alt=""/>
</div>

<div id="menubalk">
   <h5>Menu</h5>
</div>

Javascript:

function toggle () {
  var el = document.getElementById("menubalk");
  var kop = document.getElementById("kop");
  var pag = document.getElementById("pagina");

  if ( el.style.marginLeft=="-260px" ) {
     el.style.marginLeft="0px";
     kop.style.marginLeft="260px";
     pag.style.marginLeft="260px";
  } else {
     el.style.marginLeft="-260px";
     kop.style.marginLeft="0px";
     pag.style.marginLeft="0px";
  }
}

JavaScriptのどこかにマージンを設定する必要があるかもしれないと思いますが、わかりません。

すべてのヘルプは大歓迎です!

4

4 に答える 4

4

style.marginLeftあなたのインラインスタイルを見ています。インライン スタイルを定義していないため、最初style.marginLeftは未定義です。

これを修正するには、if/else ステートメントを逆にするだけです。

if ( el.style.marginLeft=="0px" )
于 2013-02-26T19:44:06.460 に答える
1

この行で

if(el.style.marginLeft=="-260px") {

要素のインライン スタイルが特定の値であるかどうかを確認しています。ただし、このスタイルは css で設定されます。メニューに className を追加して展開することをお勧めします。このクラス名を確認し、それに応じて追加/削除できます。

  if ( el.className == "expanded" ) {
     el.className = "";
  } else {
     el.className = "expanded";
  }

css に次のように追加します。

#menubalk.expanded {
    margin-left:0;
}
于 2013-02-26T19:46:53.430 に答える
1

element.style only search for inline style, to get actual style you can use getComputedStyle

i.e.
if ( window.getComputedStyle(el).marginLeft=="-260px" ) {...

Reference: https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle

Note: For IE, this only works for IE9 or above.

于 2013-02-26T19:48:31.463 に答える
0

JavaScript でメニュー スタイルをどこかに設定したとおっしゃっていますが、実際には、CSS で左マージンを設定するのではなく、初期化の一部としてそれを行うことをお勧めします。

CSS (または他の場所) でマージンを設定したことを認識していないため、最初のクリックで JavaScript が直接 else 条件に進むのではないかと思います (例がないとわかりにくい)。次に、2 回目のクリックで、JavaScript を使用して左マージンを設定し、それを読み取ってそれに応じて実行できるようにします。

于 2013-02-26T19:43:08.647 に答える