jquery - 与第二个 child 一起选择的无序列表

Question

我想从 <ul> 更改我的代码至 <select>和 <li><a href="#link"></li>至 <option value="#link"></option>

这是我的html代码

<ul class="navigator">
    <li class="active"><a href="index.php">HOME</a></li>
    <li class="dropdown"><a href="#">COMPANY</a>
        <ul class="navigatorChild">
            <li><a href="companyAbout.php">About Tanobel</a></li>
            <li><a href="companyFactory.php">Factory</a></li>
            <li><a href="companyResearch.php">Research</a></li>
            <li><a href="companyDistribution">Distribution</a></li>
        </ul>
    </li>
    <li><a href="#">PRODUCTS</a></li>
    <li><a href="#">NEWS &amp; EVENTS</a></li>
    <li><a href="#">CAREER</a></li>
    <li><a href="#">CONTACT US</a></li>
</ul>

我在 stackoverflow 中看到了另一个问题，我得到了将 ul li 转换为选择选项的代码

$(document).ready(function(){
  function transformToJMenu(breakpoint){
    $("select.navigator").remove();
    if ($(window).width() < breakpoint) {
      $('ul.navigator').each(function(){
        var select = $(document.createElement('select')).insertBefore($(this).hide());
        $(document.createElement('option'))
          .appendTo(select)
          .val('#')
          .html('Navigate to ..');

          option = $(document.createElement('option'))
          .appendTo(select)
          .val(this.href)
          .html(
            "&nbsp;&nbsp;" + $(this).html()
          );
        });

        select.addClass("navigator");

        $(".navigator").on('change', function(){
          window.location.href = $(this).val();
        });

      });
    } else {
      $('ul.navigator').show();
    }
  }

  transformToJMenu(768);

  $(window).on('resize', function(){
    transformToJMenu(768);
  });
});

是这样的

我知道成为我想要的人是成功的，但第二个 child 如何喜欢 About、factory 等  &nbsp &nbspAbout Tanobel而不是  &nbspAbout Tanobel ..

谢谢你，对不起我的英语

Answer 1

使用一个optgrup

     $('.navigator > li > a').each(function(index) {

    if ($(this).next().is('ul')) {
      op += '<optgroup label="'+ $(this).text()+'">';
      $(this).next().find('a').each(function() {
        op += '<option value="' + this.href + '">' + $(this).html(); + '</option>'
      });
      op += '</optgroup>'
    }  else {
     op += '<option value="' + this.href + '">' + $(this).html(); + '</option>'
    }
  });
  $(select).append(op);

演示:

function transformToJMenu(breakpoint) {

  $("select.navigator").remove();

  if ($(window).width() < breakpoint) {
    $('ul.navigator').each(function() {

      var select = $(document.createElement('select')).insertBefore($(this).hide());

      $(document.createElement('option'))
        .appendTo(select)
        .val('#')
        .html('Navigate to ..');
      var op = '';
      $('.navigator > li > a').each(function(index) {
       
        if ($(this).next().is('ul')) {
          op += '<optgroup label="'+ $(this).text()+'">';
          $(this).next().find('a').each(function() {
            op += '<option value="' + this.href + '">' + $(this).html(); + '</option>'
          });
          op += '</optgroup>'
        }  else {
         op += '<option value="' + this.href + '">' + $(this).html(); + '</option>'
        }
        
        



      });
      $(select).append(op);
      select.addClass("navigator");

      $(".navigator").on('change', function() {
        window.location.href = $(this).val();
      });

    });
  } else {
    $('ul.navigator').show();
  }
}

transformToJMenu(2000 );

$(window).on('resize', function() {
  transformToJMenu(2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul class="navigator">
  <li class="active"><a href="index.php">HOME</a></li>
  <li class="dropdown"><a href="#">COMPANY</a>
    <ul class="navigatorChild">
      <li><a href="companyAbout.php">About Tanobel</a></li>
      <li><a href="companyFactory.php">Factory</a></li>
      <li><a href="companyResearch.php">Research</a></li>
      <li><a href="companyDistribution">Distribution</a></li>
    </ul>
  </li>
  <li><a href="#">PRODUCTS</a></li>
  <li><a href="#">NEWS &amp; EVENTS</a></li>
  <li><a href="#">CAREER</a></li>
  <li><a href="#">CONTACT US</a></li>
</ul>