Question

我有以下html标记，比这里的演示更多，其中包含li / ul下拉列表和子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/我得到的所有li值都没有href属性，而我的sub ul li是在1选择选项中。

谢谢！

Answer 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'标签

Answer 2

(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/

如何用选择下拉mootools替换多个有序列表？

2 个答案: