0

我有以下 html 标记，比这里的演示多一点，混合了 li/ul 下拉列表和 sub ul 的不同类名

<ul class="nav">
  <li><a href="linik">Title</a></li>
  <li><a href="linik">Title</a></li>
  <li><a href="linik">Title</a></li>
  <li><a href="linik">Title</a>
    <ul class="subnav">
      <li><a href="linik">Title</a></li>
      <li><a href="linik">Title</a></li>
      <li><a href="linik">Title</a></li>
      <li><a href="linik">Title</a></li>
    </ul>
  </li>
  <li><a href="linik">Title</a></li>
  <li><a href="linik">Title</a></li>
  <li><a href="linik">Title</a></li>
   <li><a href="linik">Title</a>
    <ul class="subnav">
      <li><a href="linik">Title</a></li>
      <li><a href="linik">Title</a></li>
      <li><a href="linik">Title</a></li>
      <li><a href="linik">Title</a></li>
    </ul>
  </li>
</ul>

为了适应移动浏览器，我想将 ul 列表转换为选择列表，例如

<select class="nav" onchange="location.href=this.value">
<option  value="link">Title</option>
<option  value="link">Title</option>
<option  value="link">Title</option>
<option  value="link">Title</option>
<option  value="link">Title</option>
<option  value="link">Title</option>


</select>

我试过了

window.addEvent('domready', function () {



      $$('ul.nav li').each(function(el) {

            var option = new Element('option',{html:el.get('html')});
            option.replaces(el);
        });
      $$('ul.nav').each(function(el) {

            var select= new Element('select',{html:el.get('html')});
            select.replaces(el);
        });
});

但正如您在这里看到的http://jsfiddle.net/xVrZe/我得到所有没有 href 属性的 li 值，而我的 sub ul li 在 1 个选择选项中。

谢谢！

4

2 回答 2

1

试试这个：

window.addEvent('domready', function () {     
  $$('ul.nav').each(function(el) {
    var options = el.getElements('li > a').map(function(el) {
        return new Element('option',{html:el.get('html'), value:el:get('href')});
    });

    var select= new Element('select');
    select.adopt(options);
    select.replaces(el);
  });
});

问题是：

1）您需要从每个导航开始，只关注其内容（如果页面上有多个导航）

2）你需要得到'a'标签，而不是'li'标签

于 2012-05-18T06:28:46.487 回答
1 
(function() {
    var Options = new Elements(),
        ul = document.getElement('ul.nav');

    ul.getElements('li a').each(function(el) {
        Options.include(new Element('option', {
            text: el.get('html'),
            value: el.get('href')
        }));
    });

    new Element('select', {
        events: {
            change: function() {
                window.location.href = this.get('value');
            }
        }
    }).adopt(Options).replaces(ul);
}());

这也将转换并删除原始 ul - 附加更改事件。http://jsfiddle.net/dimitar/xVrZe/2/

于 2012-05-18T09:11:15.543 回答