Question

我有一个UL LI菜单，当您在手机上查看时，我会变成一个选择下拉列表。

我现在要缩进子项目，例如

列出项目1
- 儿童项目1
---- Child Child item 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/

Answer 1

这应该做你想要的，而且它是可定制的。 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');

作为旁注，在您的代码中，您多次附加内容。最好在一次调用中附加所有内容以避免过度回流。

Answer 2

这应该这样做，不确定支持手机上的“margin-left”，但会指出你正确的方向。

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

编辑：似乎只有Firefox允许选项元素的保证金，

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

Answer 3

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

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

我刚添加了这个：

li {
    padding-left: 1em;
}

Answer 4

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

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

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

4 个答案: