Question

我正在尝试一些非常简单的事情。在页面加载时，内容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;

}

希望上述内容足以确定其不起作用的原因。谢谢！

Answer 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

Answer 2

我想我通过以下方式设法解决了这个问题：

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();


        }

    }

显示JQuery toggleClass的div

2 个答案: