如果在手机/平板电脑上，则仅显示“隐藏/显示”按钮

Question

我有以下演示 ： 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');
      }
    });
  });

}); 

谢谢。

Answer 1

嗯，您可以尝试几种选择。 我个人建议不要使用浏览器检测，除非您只想专门针对允许您实施的浏览器。 根据您的要求，为什么不尝试媒体查询？

 .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.
 }

}

Answer 2

使用这些脚本，您可以检测到任何移动浏览器
http://detectmobilebrowsers.com/
我认为最短的解决方案是要求使用mobil浏览器，并且如果用户未使用该浏览器， click()执行按钮的click()函数