Question

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

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

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

使用CSS类 visible-desktop 创建一个选项卡式内容，使用CSS类 visible-phone 创建一个折叠内容。这样做的缺点是实际的标签内容必须传送两次，如果它包含用户生成的HTML代码（如我的情况），一旦用户输入带有id的HTML元素，就会导致W3C无效代码（因为这个id会在页面上出现两次）。
通过JavaScript从标签更改为折叠。这不是一个令人满意的解决方案，因为a）它需要执行javascript和b）需要更改的代码很多（请参阅文档中的标记差异）。

Answer 1

我的方法是将主列表菜单变成手机显示的下拉列表。 CSS-Tricks.com convert menu to drop down

我根据上面的代码生成了我的生产代码，并对其进行了大量修改，以便为大型显示器和移动电话的下拉列表设置滑块面板。

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

激活下拉菜单后，用户将自动进入所选项目链接。

我的例子在这里： Menu to drop down with auto redirect

    $(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;
        }
    });

Twitter Bootstrap移动组件 - 最佳实践

1 个答案: