0

私は次の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リストに変換したいと思います

<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 値を取得し、サブ ul li は 1 つの選択オプションにあります。

ありがとうございました！

4

2 に答える 2

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 に答える
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) 「li」タグではなく「a」タグを取得する必要があります

于 2012-05-18T06:28:46.487 に答える