0

这个 jQuery 代码是否可以作为独立的 javascript 运行？这是我想在我的项目中使用的唯一 javascript，所以我不想只为这个 1k 脚本加载整个 jquery 库。

//chris coyier's little dropdown select-->

$(document).ready(function() {

//build dropdown
$("<select />").appendTo("nav.primary");

// Create default option "Go to..."
$("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Go to..."
}).appendTo("nav select");  

// Populate dropdowns with the first menu items
$("div#brdmenu ul li a").each(function() {
    var el = $(this);
    $("<option />", {
        "value"   : el.attr("href"),
        "text"    : el.text()
    }).appendTo("nav.primary select");
});

//make responsive dropdown menu actually work           
$("nav.primary select").change(function() {
    window.location = $(this).find("option:selected").val();
});

});

我试图找到以前的答案，但大多数问题都是为了转换为 jquery 而不是反之亦然:)

4

3 回答 3

2

显然可以用直接的 javascript 来做这些事情，但是（我知道）没有办法自动进行这种转换。您将不得不逐行进行并自己进行转换。

于 2012-10-18T01:36:03.347 回答
1

试试这个。

我要遗漏的一件事是$(document).ready，但在 stackoverflow 上有许多可用的解决方案。这是一个惊人的大量代码！

但其他功能：

// build the dropdown
var selectElement = document.createElement('select');
var primary = document.getElementsByClassName('primary')[0];

// create a default option and append it.
var opt = document.createElement('option');
var defaultOpt = opt.cloneNode(false);
defaultOpt.selected = true;
defaultOpt.value = "";
defaultOpt.text = "Go to...";
selectElement.appendChild(defaultOpt);

// populate the dropdown
var brdmenuUl = document.getElementById('brdmenu').getElementsByTagName('ul')[0];
var listItems = brdmenuUl.getElementsByTagName('li');
for(var i=0; i<listItems.length; i++){
    var li = listItems[i];
    var a = li.getElementsByTagName('a')[0];
    var newOpt = opt.cloneNode(false);
    newOpt.value = a.href;
    newOpt.text = a.innerHTML;
    selectElement.appendChild(newOpt);
}

// now listen for changes
if(selectElement.addEventListener){
    selectElement.addEventListener('change', selectJump, false);
}
else if(selectElement.attachEvent){
    selectElement.attachEvent('change', selectJump);
}

function selectJump(evt){
    window.location = evt.value;
}

primary.appendChild(selectElement);​

一些笔记！

  1. 我们不是专门寻找 nav.primary，我们只是找到第一次出现的类 .primary 的东西。为了获得最佳性能，您应该向该元素添加一个 ID 并改用getElementById。

  2. 与#brdmenu 中的列表类似，我们在每个 LI中查找第一个UL 和第一个A。这并不是 jQuery 所做的，如果您需要在 #brdmenu 中迭代多个 UL，您可以使用另一个 for 循环。

我认为这应该一切正常，这里有一个小提琴

于 2012-10-18T02:03:06.490 回答
1

这是类似于市场的答案。我假设您想要获取brdmenu元素内的 UL 元素中的所有链接。如果您只想要 LI 元素上的第一个链接，只需调整获取它们的循环。

此外，这不是一个好主意。对链接使用选择元素很久以前就过时了，用户更喜欢真正的链接。此外，当在 IE 中使用光标键导航选项时，每次选择不同的选项时都会发送一个更改事件，因此用户只能在被带到该位置之前选择下一个选项。添加他们在选择位置后按下的“开始”按钮要好得多。

主要变化是使用 ID 来获取nav.primary元素，我假设它是您应该已经通过 ID 获取的单个元素。

function doStuff() {

    function getText(el) {
      return el.textContent || el.innerText;
    }
    var div, link, links, uls;

    // Use an ID to get the nav.primary element
    var navPrimary = document.getElementById('navPrimary');

    // Create select element and add listener
    var sel = document.createElement('select');
    sel.onchange = function() {
      if (this.selectedIndex > 0) {  // -1 for none selected, 0 is default
        window.location = this.value;
      }
    };

    // Create default option and append to select
    sel.options[0] = new Option('Go to...','');
    sel.options[0].setAttribute('selected','');

    // Create options for the links inside #brdmenu
    div = document.getElementById('brdmenu');
    uls = div.getElementsByTagName('ul');

    for (var i=0, iLen=uls.length; i<iLen; i++) {
      links = uls[i].getElementsByTagName('a');

      for (var j=0, jLen=links.length; j<jLen; j++) {
        link = links[j];
        sel.appendChild(new Option(getText(link), link.href));
      }
    }

    // Add select to page if found navPrimary element
    if (navPrimary) {
      navPrimary.appendChild(sel);
    }
}

window.onload = doStuff;

它只有 28 行实际代码，仅比原始代码多 10 行，不需要任何支持库，并且可以在任何正在使用的浏览器中运行（而且大多数不是）。

于 2012-10-18T04:29:47.030 回答