开发者

jQuery How do I move an element inside of another element

开发者 https://www.devze.com 2022-12-23 17:47 出处:网络
Hi I\'m using grails navigation plugin and when it generates menus it put the sub navigation underneath the main menu, but i\'m making my menu a vertical menu so i don\'t want the sub menu under the w

Hi I'm using grails navigation plugin and when it generates menus it put the sub navigation underneath the main menu, but i'm making my menu a vertical menu so i don't want the sub menu under the whole menu i want it under the active element.

Example: this is how it generate the menu and sub menu

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

What i want is:

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

Since i don't know of a way to make grails nav plugin do this i guess i'll have to make jquery do it after it's ge开发者_运维问答nerated. Any ideas?


Edit

So the jquery i used from the answer below is:

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

This seems like it should work but the menu still looks the same with all the sub items down below.


You can do this:

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

Alternatively:

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

Or, to put it under all of them (hide by CSS):

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

Edit, for the updated question:

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


Assuming with active you mean mouse hovering.

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

精彩评论

暂无评论...
验证码 换一张
取 消