0

私は非常に単純なことを試みています。ページが読み込まれると、コンテンツ 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;

}

うまくいけば、上記が機能しない理由を特定するのに十分です。ありがとう！

4

2 に答える 2

1

要素にcssを使用するかどうかはわかりませdisplay:noneんが、hide/showを2回呼び出していることになります。

// 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 に答える