我正在尝试一些非常简单的事情。在页面加载时,内容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;
}
希望上述内容足以确定其不起作用的原因。谢谢!
答案 0 :(得分:1)
嗯,我不确定你是否使用css来display:none
你的元素,但是我要去那个你正在调用hide / show两次。
// 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(){
$('#header ul').toggleClass('hide')
}
});
}
另一种使用jquery toggle()
的方法:
if (window.innerWidth && window.innerWidth <= 480){
$(document).ready(function() {
$('#header ul').css('display:none');
$('#header').append('<div class="leftButton" onclick="toggleMenu()">Menu</div>');
function toggleMenu(){
$('#header ul').toggle()
}
});
}
<强>更新强>
嗯,我冒昧地修改了一些你的html结构,消除了div上的onclick并使用纯jquery。这是javascript:
$(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">Menu</div>');
$('#header').delegate('.leftButton','click',function (){
$('#header ul').toggleClass('hide')
})
});
这是一个有效的jsfiddle
答案 1 :(得分:0)
我想我通过以下方式设法解决了这个问题:
function toggleMenu(){
//$('#header ul').toggleClass('hide');//adding hide class to the object
//$('#header .leftButton').toggleClass('pressed');
$('#header ul').toggleClass('hide');
$('.leftButton').toggleClass('pressed');
if ($('#content').is(':visible')){
$('#content').hide();
}
else{
$('#content').show();
}
}