我有一个 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/
最佳答案
这应该可以满足您的需求,并且可以自定义。 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 += '– '; }
options += '<option>' + depthChar + text + '</option>';
});
$('<select />').append(options).appendTo('#primary-nav');
顺便说一句,在您的代码中您会多次附加内容。最好将所有内容附加到一次调用中,以避免过度回流。
关于jquery - 从列表中创建 <select> - 缩进子项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9358148/