将Twitter引导标签转换为选择菜单

发布时间：2020-12-17 21:29:29 所属栏目：安全来源：网络整理

导读：任何人都知道如何将Twitter Bootstrap标签转换为选择菜单？这对于移动布局来说会派上用场. 像这样…… selectoption value="#everything"Everything/optionoption value="#catalog"Catalog/optionoption value="#articles"Articles+/optionoption value="#ej

任何人都知道如何将Twitter Bootstrap标签转换为选择菜单？这对于移动布局来说会派上用场.

像这样……

<select>
<option value="#everything">Everything</option>
<option value="#catalog">Catalog</option>
<option value="#articles">Articles+</option>
<option value="#ejournals">E-Journals</option>
<option value="#reserve">Reserve</option>
<option value="#databases">Databases</option>
</select>

这是一个实例.我有标签设置并正在工作.但我希望它也适用于选择菜单.因此,选择菜单也会更改选项卡.这将用于该网站的移动版本.

http://library.buffalo.edu/redesign/html/tabs.html

解决方法

我有一个解决方案,因为我看起来像那样.特里的片段对我的帮助太过分了.我用jQuery：

$(document).ready(function() {

  $(window).resize(responsive);
  $(window).trigger('resize');

});

function responsive(){

  // get resolution
  var resolution = document.documentElement.clientWidth;

  // because mobile layout
  if (resolution < 979) {

    if( $('.select-menu').length === 0 ) {

      // create select menu
      var select = $('<select></select>');

      // add classes to select menu
      select.addClass('select-menu input-block-level');

      // each link to option tag
      $('.nav-tabs li a').each(function(){
        // create element option
        var option = $('<option></option>');

        // add href value to jump
        option.val(this.href);

        // add text
        option.text($(this).text());

        // append to select menu
        select.append(option);
      });

      // add change event to select
      select.change(function(){
        window.location.href = this.value;
      });

      // add select element to dom,hide the .nav-tabs
      $('.nav-tabs').before(select).hide();

    }

  }

  // max width 979px
  if (resolution > 979) {
    $('.select-menu').remove();
    $('.nav-tabs').show();
  }

}

View Demo

我希望这有帮助！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!