从列表中创建 <select> - 缩进子项？答案

【问题标题】：Create <select> from list - indent child items?从列表中创建 <select> - 缩进子项？
【发布时间】：2012-03-10 14:49:23
【问题描述】：

我有一个 UL LI 菜单，当您在移动设备上查看它时，我会将其变成一个选择下拉菜单。

我现在想缩进子项，例如

列表项 1
-- 子项 1
----子子项1
-- 子项 2
列表项 2

而不是在一行中列出。

我很高兴只添加 nbsp 以使事情变得简单 - 或者如果更合适，添加类和 CSS。

我目前用来生成选择的代码是：

$("<select />").appendTo("#primary-nav");

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

  $("#primary-nav a").each(function() {
   var el = $(this);
   $("<option />", {
       "value"   : el.attr("href"),
       "text"    : el.text()
   }).appendTo("#primary-nav select");
  });

  $("#primary-nav select").change(function() {
    window.location = $(this).find("option:selected").val();
  });

它生成的菜单是这样构建的：

<ul>
  <li><a>Item 1</a>
      <ul>
          <li><a>Child Item 1</a>
              <ul>
                  <li><a>Child Item 1</a></li>
              </ul>
          </li>
          <li><a>Child Item 2</a></li>
      </ul>
  </li>
  <li><a>Item 2</a></li>
</ul>

这里有一个例子：http://jsfiddle.net/C5S32/

【问题讨论】：

标签： jquery list select html-lists

【解决方案1】：

我发现的最佳解决方案会自动添加子缩进“-”标记。确保将顶部的“.navbar .nav”更改为您自己的 div 类或在原始 ul 上设置的 id。

http://snipplr.com/view/66721/

【讨论】：

【解决方案2】：

这应该可以满足您的需求，并且可以自定义。 http://jsfiddle.net/C5S32/7/

var options = '<option selected>Go to...</option>';
$('#primary-nav').find('a').each(function () {
    var text = $(this).text(),
        depth = $(this).parent().parents('ul').length,
        depthChar = '',
        i = 1;
    for (i; i < depth; i++) { depthChar += '&ndash;&nbsp;'; }
    options += '<option>' + depthChar + text + '</option>';
});
$('<select />').append(options).appendTo('#primary-nav');

附带说明，在您的代码中，您会多次添加内容。最好在一次调用中追加所有内容，以避免过度回流。

【讨论】：

这似乎比我的方法更干净。感谢您的帮助！

【解决方案3】：

应该这样做，不确定是否支持手机上的“margin-left”，但会为您指明正确的方向。

http://jsfiddle.net/C5S32/2/

编辑：似乎只有 Firefox 允许选项元素上的边距，

http://jsfiddle.net/C5S32/6/

【讨论】：

这可以满足我的需要，所以我投了赞成票。感谢您的帮助！

【解决方案4】：

看看这是否适合您的需求：

http://jsfiddle.net/C5S32/1/

我刚刚添加了这个：

li {
    padding-left: 1em;
}

【讨论】：

我不知何故认为贾斯汀希望选择选项缩进。不是李？
是的，我需要缩进的选择选项而不是 LI :)