1

我有一小段脚本允许用户调整窗口大小以将无序列表转换为选择菜单。

但是，我想从选择菜单中删除任何嵌套的无序列表。

演示：http: //jsfiddle.net/k7272/

所以基本上使用上面的例子，“测试”部分不会出现在选择菜单中，但仍会出现在无序列表中。

我如何实现这一目标？

这是我的Javascript：

// DOM ready
     $(function() {

      // Create the dropdown base
      $("<select />").appendTo("nav");

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

      // Populate dropdown with menu items
      $("nav a").each(function() {
       var el = $(this);
       $("<option />", {
           "value"   : el.attr("href"),
           "text"    : el.text()
       }).appendTo("nav select");
      });

       // To make dropdown actually work
       // To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
      $("nav select").change(function() {
        window.location = $(this).find("option:selected").val();
      });

     });

非常感谢:-D

4

3 回答 3

3

定位nav a会找到它的所有孩子，甚至孩子的孩子，所以你需要像这样直接定位他们

$("nav > ul > li > a").each(...

http://jsfiddle.net/k7272/1/

于 2013-07-04T12:24:43.237 回答
1

代替选择 的任何后代的“nav a”选择器，使用子运算符：$("nav>ul>li>a")。

更好的是，在你的顶级 ul 上放置一个类，然后使用 $('ul.classname>li>a')，然后你可以在你的 DOM 周围移动整个列表并且仍然让选择器工作。

于 2013-07-04T12:28:20.433 回答
1

将选择器更改为仅查找直接子级，这将避免嵌套的ul. 尝试这个：

$("nav > ul > li > a").each(function () {
    // your code...
});

更新的小提琴

于 2013-07-04T12:25:46.323 回答