使用响应式网页设计和JavaScript设计面包屑

Question

我想在页面中添加面包屑 ，并且希望通过调整窗口大小，更改分辨率和使代码独立于设备/目标来正确缩放视图。

我知道响应式网页设计是我必须要做的。 我已经阅读了几篇文档和教程，并了解使用媒体查询可以实现这一目标。 因此，在媒体查询中，我使用最小宽度，最大宽度来更改CSS。

我想要实现的还有更多。 我有一个面包屑，如下所示

链接1 /链接2 /链接3，依此类推。

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

现在，我有一个解决方案。 创建默认的面包屑并创建一个包含所有链接并隐藏它的下拉菜单。 当宽度小于320px时，我将隐藏默认的面包屑并显示下拉列表。 但这是我目前有一个奇怪的解决方案。

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

还有其他方法吗？ 我不想使用jquery或任何其他库，因为在我们的项目中禁止使用其他库。 我们使用所有权库。

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

Answer 1

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

我相信您可以使用它来转换面包屑中的链接以使用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); 

您以后可以像$('.breadcrumbs').convertToList();一样使用它$('.breadcrumbs').convertToList();

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