使用響應式網頁設計和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