Question

您好我正在使用Grails导航插件，当它生成菜单时，它将子导航放在主菜单下面，但我正在使我的菜单成为一个垂直菜单，所以我不希望整个菜单下的子菜单我想要它在活跃元素下。

示例：这是它生成菜单和子菜单的方式

<ul class="mainmenu">
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
</ul>
<ul class="submenu">
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
</ul>

我想要的是：

<ul class="mainmenu">
   <li>item1
     <ul class="submenu">
       <li>item1</li>
       <li>item2</li>
       <li>item3</li>
     </ul>
   </li>
   <li>item2</li>
   <li>item3</li>
</ul>

因为我不知道如何制作grails nav插件这样做我想我必须让jquery在生成之后再这样做。有什么想法吗？

<小时/> 编辑

所以我从下面的答案中使用的jquery是：

<script type="text/javascript"> 
$(function() {
        alert("hi");
        $(".subnavigation").appendTo($(".navigation li:navigation_active"));
      });
</script>
....
<ul class="navigation" id="navigation_tabs">
    <li class="navigation_first">Item 1</li>
    <li class="navigation_active">Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li class="navigation_last">Item 5</li>
</ul> 
<ul class="subnavigation" id="subnavigation_tabs">
    <li class="subnavigation_first">Sub 1</li>
    <li>Sub 2</li>
    <li class="subnavigation_last">Sub 3</li>
</ul>

这看起来应该可行，但菜单看起来仍然与下面的所有子项相同。

Answer 1

你可以这样做：

$(".submenu").appendTo($(".mainmenu li:first"));

可替换地：

$(".mainmenu li:first").append($(".submenu"));

或者，把它放在所有这些之下（用CSS隐藏）：

$(".mainmenu li").append($(".submenu"));

修改，了解更新后的问题：

$(".subnavigation").appendTo($(".navigation li.navigation_active"));

Answer 2

假设有效，则意味着鼠标悬停。

$("ul.mainmenu li").hover(function() {
    $(this).append($("ul.submenu"))
})

jQuery如何在另一个元素中移动元素

2 个答案: