Question

我似乎无法正确地构成我的ul / li菜单。我正在使用递归函数来生成正确的菜单布局，但它似乎无法处理子菜单。

来源：

<ul>
  <li><a href="#">Top menu</a>
    <ul>
    <li><a href="#Home">Home</a></li>
    <li>
    <a href="#">Some page</a>
      <ul>
        <li><a href="#">Submenu item 1</a></li>
        <li><a href="#">Submenu item 2</a></li>
        <li>
          <a href="#">Submenu item 3</a>
          <ul>
            <li><a href="#">Sub-submenu item</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#FAQ">FAQ</a></li>
    </ul>
  </li>
</ul>

脚本修改的“应该是正确的”输出

<div class="" role="navigation" id="p-">
  <h3>Top menu</h3>
  <div class="body">
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <div class="" role="navigation" id="p-">
        <h3>Some page</h3>
        <div class="body">
          <ul>
            <li><a href="#">Submenu item 1</a></li>
            <li><a href="#">Submenu item 2</a></li>
            <li>
              <div class="" role="navigation" id="p-">
                <h3>Submenu item 3</h3>
                <div class="body">
                  <ul>
                    <li><a href="#">Sub-submenu item 1</li>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li><a href="#">FAQ</a></li>
  </ul>
  </div>
</div>

小提琴在http://jsfiddle.net/fb0kqxg6/2/

去哪里最好的方法是什么？

Answer 1

你可以做一些dom操作，比如

＆＃13;

var $ul = $('#menu').clone();

$ul.find('li:has(ul)').each(function() {
  var $this = $(this),
    $a = $this.children('a').remove();
  $this.wrapInner('<div class="" role="navigation" id="p-"><div class="body"></div></div>');
  $('<h3 />', {
    text: $a.text()
  }).prependTo($this.children())

})

$ul.appendTo('#menus')

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<ul id="menu">
  <li><a href="#">Top menu</a>
    <ul>
      <li><a href="#Home">Home</a></li>
      <li>
        <a href="#">Some page</a>
        <ul>
          <li><a href="#">Submenu item 1</a></li>
          <li><a href="#">Submenu item 2</a></li>
          <li>
            <a href="#">Submenu item 3</a>
            <ul>
              <li><a href="#">Sub-submenu item</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#FAQ">FAQ</a></li>
    </ul>
  </li>
</ul>

<div id="menus">
</div>

＆＃13;

UL LI到具有递归功能的HTML菜单结构

1 个答案: