用第二个孩子选择的无序列表

Question

我想对我的代码进行更改，从$res到<ul>和<select>再到<li><a href="#link"></li>

这是我的HTML代码

<option value="#link"></option>

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

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

就像这样

我知道成为我想要的成功，但第二个孩子如何关注，工厂等是$(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); }); }); 而不是 &nbsp &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);

演示：

＆＃13;

＆＃13;

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);
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;