jQuery的顯示div toggleClass

Question

我在嘗試一些非常簡單的事情。在頁面加載時，內容div中的數據被dsplayed並且菜單（ul元素）被隱藏。點擊通過css創建的菜單按鈕後，菜單加載並且內容div被隱藏。當我再次點擊菜單按鈕時，它使用toggleClass（）隱藏菜單。在這一點上它的目的是顯示在內容股市的數據，但這不是按預期工作。

希望你能告訴我我做錯了什麼。

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

我認爲我設法通過執行以下操作來解決它：

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


     } 

    } 

Answer 2

嗯，我不確定你是否使用了css來display:none你的元素，但我打算說你要隱藏/顯示兩次。

使用jQuery toggle()

// 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') 
    }   


}); 

} 

另一種方法：

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結構消除了對股利的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