3

使用 Twitter Bootstrap 构建响应式网站时，可以使用出色的 JavaScript 组件，例如选项卡或折叠（手风琴）。但是，特定组件的选择不一定适用于所有设备。

就我而言，在桌面版本中，我使用了tabs。但是在智能手机版本中，标签变得无法使用，因为一旦一个标签包含三个或更多标签，由于屏幕尺寸小，它们就不能排成一行。相反，对于移动版本，折叠将是一个不错的选择。

我的问题旨在阐明执行此类更改的最佳实践。我可以想象两种解决方法，但都相当难看，我想知道是否有更清洁的解决方案：

  1. 创建一个使用 CSS 类visible-desktop的选项卡式内容和一个使用 CSS 类visible-phone的折叠内容。这样做的缺点是实际的选项卡内容必须交付两次，如果它包含用户生成的 HTML 代码（如我的例子），一旦用户输入带有 id 的 HTML 元素，就会导致 W3C 无效代码（因为这个 id 会在页面上出现两次）。

  2. 通过 JavaScript 从选项卡更改为折叠。这不是一个令人满意的解决方案，因为 a) 它需要执行 javascript，并且 b) 有很多代码需要更改（请参阅文档中的标记差异）。

4

1 回答 1

0

我的方法是将我的主列表菜单变成手机显示的下拉菜单。 CSS-Tricks.com 将菜单转换为下拉菜单

我基于上面的代码生成了我的生产代码，并对其进行了大量修改，以充当大型显示器的滑块面板和手机的下拉列表。

为什么要考虑手机的下拉列表？在手机显示屏上，下拉菜单列表将激活手机的原生滚动 UI，其外观和性能与原生手机应用程序非常相似。使用下拉列表还可以减少设计中的许多高度承诺。

当下拉菜单被激活时，用户将被自动带到所选择的项目链接。

我在这里的例子： 使用自动重定向下拉菜单

    $(document).ready(function() {
    var sNavFirsLI2 = $(this).find("#gbl_sNav ul").children(":first-child");        
    sNavFirsLI2.each(function(){
               console.log('Outside: '+$(this).html());
    });
});var currentSnav;  sNavAccordion = new Boolean(false);  currentSnav = $("#gbl_sNav").html();

$("#removeAccordion").click(function() {
    if(sNavAccordion == true){
        var tempContents;
            $('#gbl_sNav ul').show();
            $('#gbl_sNav select').remove();
            //set Snav back to false
            sNavAccordion = false;  
    }else{
        alert('Nothing to remove');
    }
});

    $("#enableAccordion").click(function() {        
        if(sNavAccordion == false){
            $("<select />").appendTo("#gbl_sNav");
            $("<option />", {
               "selected": "selected",
               "value"   : "",
               "text"    : "Go to..."
            }).appendTo("#gbl_sNav select");
            $("#gbl_sNav a").each(function() {
             var myli = $(this);
             $("<option />", {
                 "value"   : myli.attr("href"),
                 "text"    : myli.text()
             }).appendTo("#gbl_sNav select");
            });     
        $('#gbl_sNav ul').hide();

            sNavAccordion = true;               
        }else{
            return false;
        }
    });
于 2013-02-11T18:57:50.647 回答