Question

我正在为我的wordpress网站创建一个动态子菜单，我使用walker nav菜单为子菜单显示标题，图像和描述。一切都很完美，除了我想添加一个bootstrap轮播，我似乎无法绕过子菜单中的列表。这是我目前的结构。

<ul>
  <li>link 1</li>
  <li>link 2</li>
  <li>link 3
      <ul class="sub-menu">
        <li>Sub-menu-item 1</li>
        <li>Sub-menu-item 2</li>
        <li>Sub-menu-item 3</li>
        <li>SUb-menu-item 4</li>
      </ul>
  </li>
</ul>

想要实现的是：

<ul>
  <li>link 1</li>
  <li>link 2</li>
  <li>link 3
      <ul class="sub-menu">
        <div class="carousel-class-here">
         <li>Sub-menu-item 1</li>
         <li>Sub-menu-item 2</li>
        </div>
        <div class="carousel-class-here">
         <li>Sub-menu-item 3</li>
         <li>Sub-menu-item 4</li>
        </div>
      </ul>
  </li>
</ul>

任何帮助或建议将不胜感激。谢谢。

Answer 1

你可以用这种方式用jquery做到这一点

    <script>
    jQuery(function($){
      var items = $('.sub-menu > li');
      for (var i = 0; i < items.length; i += 2) {
        items.slice(i, i + 2).wrapAll('<div class="carousel-class-here"></div>');
      };
    });
    </script>

结帐我的JSfiddle

将子菜单包装在单独的div中以用于bootstrap轮播

1 个答案: