0

我正在尝试一些非常简单的事情。在页面加载时，内容 div 中的数据被显示，菜单（ul 元素）被隐藏。单击通过 css 创建的菜单按钮后，菜单加载并且内容 div 被隐藏。当我再次单击菜单按钮时，它使用 toggleClass() 隐藏菜单。此时它的意思是在内容 div 中显示数据，但这并没有按预期工作。

希望你能告诉我我做错了什么。

安卓.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;

}

希望以上内容足以确定它为什么不起作用。谢谢！

4

2 回答 2

1

好吧，我不确定你是否对display:none元素使用 css，但我会说你调用了两次隐藏/显示。

// 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

于 2012-06-27T11:53:49.803 回答
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();


        }

    }
于 2012-06-27T23:30:39.570 回答