使用响应式网页设计和javascript设计面包屑程序

Question

我希望在我的页面中有面包屑，我希望视图能够适当调整窗口大小，分辨率更改和代码以独立于设备/目标。

我来了解响应式网页设计是我必须做的。我已经阅读了一些文档和教程，并了解使用媒体查询我们可以实现它。所以在我的媒体查询中，我使用min-width，max-width来更改css。

我想实现的是更多。我有一个面包屑，看起来像下面

链接1 /链接2 /链接3等。

无论何时视口/屏幕宽度小于320px，我希望它成为下拉菜单。

现在我有一个解决方案。创建默认面包屑并创建一个保存所有链接并隐藏它的下拉菜单。当宽度小于320px然后我会隐藏默认的面包屑并显示下拉菜单。但在这个时候，这是一个奇怪的解决方案。

相反，我想要一些javascript方法来对默认的面包屑行事，并从中获得所有的链接，然后创建一个下拉列表并添加所有的链接。然后隐藏默认的面包屑。为此我必须添加一个调整大小处理程序并触发一个事件，然后我的JavaScript将会听取该事件并对面包屑执行操作。

有没有其他办法。我不想使用jquery或任何其他库，因为在我们的项目中禁止使用其他库。我们使用proprietery库。

任何帮助都非常感谢。谢谢你们。

Answer 1

更新：对不起，我没有看到你不想使用jQuery。

我相信你可以使用this在面包屑的链接转换为选择使用JavaScript元素，而不依赖于任何图书馆

代码：

var nav  = document.getElementById('nav'), 
    links = nav.getElementsByTagName('a'), 
    select = document.createElement('select'), 
    option = document.createElement('option'); 

for (var i = 0; i < links.length; i++){ 
    var link = links[i], 
     _option = option.cloneNode(false); 
    _option.value = link.href; // Set the option's value to the original link 
    _option.innerHTML = link.innerHTML; // Set the option's text to the original text 
    // if this link matches the current URL, add a selected attribute 
    if(window.location.href == link.href) { 
     _option.selected = 'selected'; 
    } 
    select.appendChild(_option); 
}; 

select.addEventListener('change', function() { 
    window.location = select.value; 
}, false); 

nav.parentNode.insertBefore(select, nav); 
nav.style.display = 'none'; 

我有一个转换之前写这个jQuery插件将容器中的链接转换为选择元素

(function ($) { 
    $.fn.convertToList = function() { 
     var that = this; 
     this.before(
      $('<select class="breadcrumbs-list"></select>'). 
      change(function() { 
       window.location = $(this).val(); 
      } 
     )) 
     this.find('a').each(function() { 
      that.prev('select').append('<option value="' + $(this).attr('href') + '">' + $(this).html() + '</option>') 
     }); 
    }; 
})(jQuery); 

您可以稍后使用它，如​​

现在使用CSS媒体查询隐藏/显示.breadcrumbs或.breadcrumbs-list