Javascript 显示/隐藏jquery脚本

我有剧本。它的工作很好，但我需要修改这个脚本的html

就像我的模式一样

<!--Links-->
<div>link1</div>
<div>link2</div>


<!--Hide divs-->
<div>Show1</div>
<div>Show2</div>

链接1
链接2
展示1
展示2

我的目标是让html看起来像这样：

示例html我想做什么

    <div class="product_menu_categories">link_1</div>
    <div class="product_menu_categories">link_2</div>


     <div class="copy hide">
            <ul>
                <li><a href="#" id="prod_1" class="product_menu_link">test1</a></li>
                <li><a href="#" id="prod_2" class="product_menu_link">test2</a></li>
            </ul>
        </div>

        <div class="copy hide">
            <ul>
                <li><a href="#" id="prod_6" class="product_menu_link">test4</a></li>
            </ul>
        </div>

link\u 1
链接2

你是说你希望你的页面结构是：

<!-- Top Level Menus/Categories -->
<div>Menu Item #1</div>
<div>Menu Item #2</div>

<!-- Submenu Items -->
<div id="submenu-of-menu-item-1">
    <div>Item A</div>
    <div>Item B</div>
</div>

<div id="submenu-of-menu-item-2">
    <div>Item C</div>
</div>

基本上，这样做就是在第一次单击时将子菜单移动到正确的位置，然后隐藏其余的

div.copy

元素

---

这是您在JSFIDLE上修改的示例：

我已经有了工作jquery脚本show | hide，但我需要修改它的html结构，所有链接都将位于页面的顶部，但在我的页面的底部，我将有hide div，并单击链接它在其链接下显示它的div（如此处所示：）仍然不理解您的问题。从您的HTML中，是否希望

product\u菜单链接

链接显示（显示/隐藏）在所有

product\u菜单类别

链接的下方？我希望该脚本像现在一样工作（jquery），但HTML看起来像我的帖子示例（链接在顶部，隐藏字段在底部）

$("div.copy:eq("+i+")").insertAfter(this).toggle();
$("div.copy:not(:eq("+i+"))").hide();