html 选择UI（用于响应式导航）

Posted 2021-05-10

$(function(){

    var select = $("select");
    $("nav a").each(function(){
        
        var $this = $(this);
        var text = $this.text();  
        var level = $this.parents("ul").length;
        var indent = '';
        if (level > 1)
        {
            indent = str_repeat("\u2013", level);
        }
        select.append('<option>'+indent + text+'</option>');
    
    
    });   



});


function str_repeat(string, times) {
  var repeatedString = "";
  while (times > 0) {
    repeatedString += string;
    times--;
  }
  return repeatedString;
}

<select></select>

<nav>
<ul>
    <li><a href="">A</a></li>
    <li><a href="">B</a>
    
<ul>
    <li><a href="">A</a></li>
    <li><a href="">B</a></li>
    <li><a href="">C</a>
    <ul>
    <li><a href="">A</a></li>
    <li><a href="">B</a></li>
    <li><a href="">C</a></li>
    <li><a href="">D</a></li>
    <li><a href="">E</a></li>
</ul>    
    </li>
    <li><a href="">D</a></li>
    <li><a href="">E</a></li>
</ul>    
    
    </li>
    <li><a href="">C</a></li>
    <li><a href="">D</a></li>
    <li><a href="">E</a></li>
</ul>
</nav>