1

次のデモがあります: http://jsfiddle.net/NCj2u/

現在、すべてのプラットフォームで動作しますが、表示ボタンと非表示のコンテンツがタブレットとモバイルでのみ動作することを希望します. デスクトップはコンテンツを自動的に表示し、ボタンを非表示にします。

誰かが私がこれを行う方法を説明できますか? メディア クエリを使用しますか、それとも Javascript でこれを行いますか?

私のjQuery：

$(document).ready(function() {
  $('.nav-toggle').click(function(){
    //get collapse content selector
    var collapse_content_selector = $(this).attr('href');                   

    //make the collapse content to be shown or hide
    var toggle_switch = $(this);
    $(collapse_content_selector).toggle(function(){
      if($(this).css('display')=='none'){
                        //change the button label to be 'Show'
        toggle_switch.html('Show');
      }else{
                        //change the button label to be 'Hide'
        toggle_switch.html('Hide');
      }
    });
  });

});

ありがとうございました。

4

2 に答える 2

6

うーん、試すことができるオプションはほとんどありません。実装を許可するブラウザーのみを具体的にターゲットにしたい場合を除き、個人的にはブラウザー検出を行わないことをお勧めします。あなたの要件のために、メディアクエリを試してみませんか?

 .nav-toggle{
   display : none; // display none for everyone
 }

/* Landscape phone to portrait tablet  show the button */
@media (max-width: 767px) {

 .nav-toggle{
   display : block; // or inline-block or inline : which ever is appropriate for you.
 }

}

于 2013-07-09T16:47:21.197 に答える