Twitter Bootstrap移动组件 - 最佳实践

Question

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

在我的情况下，在桌面版本中，我使用 选项卡。但在智能手机版本中，由于屏幕尺寸较小，选项卡变得无法使用，因为只要有三个或更多选项卡，它们就无法适合一行。 相反，对于移动版本，折叠 将是一个不错的替代方案。

我的问题旨在澄清执行此更改的最佳实践。我可以想象两种解决方法，但都相当丑陋，我想知道是否有更干净的解决方案：

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

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

- m4r73n

Answer 1

我的方法是将主菜单列表转换为移动电话显示器的下拉菜单。 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;
        }
    });     

- JerryHuang.me