我有以下演示: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');
}
});
});
});
谢谢。
最佳答案
嗯,您可以尝试的选项很少。我个人建议不要检测浏览器,除非您只想专门针对允许您实现的浏览器。对于您的要求,为什么不尝试媒体查询?
.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.
}
关于javascript - 仅在手机/平板电脑上显示隐藏/显示按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17553445/