私は非常に単純なことを試みています。ページが読み込まれると、コンテンツ div のデータが表示され、メニュー (ul 要素) が非表示になります。css で作成されたメニュー ボタンをクリックすると、メニューが読み込まれ、コンテンツ div が非表示になります。メニューボタンをもう一度クリックすると、toggleClass() を使用してメニューが非表示になります。この時点で、コンテンツ div にデータを表示することを意図していますが、これは期待どおりに機能していません。
うまくいけば、私が間違っていることを教えてください。
android.js:
// JavaScript Document
if (window.innerWidth && window.innerWidth <= 480){
//when the document is ready run this code. wait for the page to load completely. otherwise javascript will run and because the uls don't exist
//yet it will fail. because the js has failed the uls will load (not good)
$(document).ready(function() {
$('#header ul').addClass('hide'); //hide ul elements which is the menu on page load (see android.css #header ul.hide..)
$('#header').append('<div class="leftButton" onclick="toggleMenu()">Menu</div>');
});
//currently the menu (ul) elements are hidden as set on page load
//toggleClass() works by checking what class its set to. if its already set to that class it changes it to the other.
function toggleMenu(){
if($('#header ul').toggleClass('hide')){//adding hide class to the object
$('#content').show();
}
if ($('#header .leftButton').toggleClass('pressed')){
$('#content').hide();
}
}
}
CSS ファイル:
#header ul.hide{
display:none;
}
#header div.leftButton{
position:absolute;
top:8.5px;
left:6px;
height:30px; /*set hight to 30px so its big enought to tap*/
font-weight:bold;
text-align:center;
color:white;
text-shadow:rgba(0,0,0,0.6) 0px -1px 1px;
line-height:28px; /*centers it within the div so its not up against the top border*/
/*placing the button*/
border-width:0 8px 0 8px;
-webkit-border-image:url(images/button.png) 0 8 0 8;
}
#header div.pressed{
position:absolute;
top:8.5px;
left:6px;
height:30px; /*set hight to 30px so its big enought to tap*/
font-weight:bold;
text-align:center;
color:white;
text-shadow:rgba(0,0,0,0.6) 0px -1px 1px;
line-height:28px; /*centers it within the div so its not up against the top border*/
/*placing the button*/
border-width:0 8px 0 8px;
-webkit-border-image:url(images/button_clicked.png) 0 8 0 8;
}
#content.hide{
display:none;
}
うまくいけば、上記が機能しない理由を特定するのに十分です。ありがとう!