2017-02-09 6 views
0

2つの機能を切り替えるボタンを作ってみましたが、動作させることができません。あなたは私に理由を教えてもらえますか?2つの機能の切り替えが機能しません

function a(el) { 
    document.getElementById("myNav").style.height = "100%"; 
} 

function b(el) { 
    document.getElementById("myNav").style.height = "0%"; 
} 

$("menubutton").click(function() { 
    return (this.tog = !this.tog) ? a() : b(); 
}); 

は、/開くナビゲーションを閉じることになったが、それは全く何もしないです:あなたのコード内のいくつかのエラーがあります/

+6

セレクタが間違っています。無効な ''要素を探しています。これは '$(" menubutton ")'や '$("。menubutton ")'でなければなりません。コードが正常に動作することを確認したら、https://jsfiddle.net/d9k8yr4h/。タイプミスとしてクローズする投票。また、 '#myDiv'要素でクラスを切り替えることで、コードをもっと簡単にすることができます(そして、より良い習慣に従うことができます):https://jsfiddle.net/d9k8yr4h/1/ –

+2

this.togとは何でしょうか? 2つの異なるCSSクラスを使ってこれを処理し、 'toggleclass( 'class1 class2')'だけを使用する方が一般的には良いでしょう。マークアップ、CSS、JavaScriptを分けてください。 – Connum

+0

「myNav」を隠そうとしているようです。もしそうなら、あなたは$( "#myNav")でそれを行うことができます。fadeToggle();最初のコメントで述べたように、セレクタが間違っています – Knriano

答えて

0

。私は(つまり、ジュースがmyNavコンポーネントの可視性をトグル)、およびメニューボタンを想定要件を取得する場合 はとにかく、ボタンのIDです:あなた、あなた、代わりに http://api.jquery.com/toggle/

$("#menubutton").click(function() { 
$("#myNav").toggle(); 

}); 

は、仕様を参照してください。 $("#myNav").show()または$("#myNav").hide()

0

私はそれがトグルクラスではうまくいかない理由を説明するのに少し時間がかかるでしょう。 とにかく、Rory McRossan(私の質問の最初のコメント)は、それがちょうどタイプミスであったという解決策を見つけました。私はこの解決策を試したと確信していたが、明らかにそうではなかった。ありがとうございます。

関連する問題