显示/隐藏jQuery脚本

我有show | hide脚本。它工作的很好，但我需要在我的架构显示/隐藏jQuery脚本

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


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

修改此脚本

http://jsfiddle.net/kolxoznik1/nRf5f/

像HTML和我的目标是，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>

来源

2012-03-05 Viktors

您的问题是什么？ – 2012-03-05 02:31:39

我有工作的jQuery脚本显示|隐藏，但我需要修改它的HTML结构，所有链接将在顶部，但在我的页面底部我将隐藏div和点击链接它显示它的div下的链接（像现在在这里：http://jsfiddle.net/kolxoznik1/nRf5f/） – Viktors 2012-03-05 02:34:51

仍然不明白你的问题。从你的HTML中，你想让'product_menu_link'链接在所有'product_menu_categories'链接下面显示（显示/隐藏）吗？ – neo108 2012-03-05 02:46:19

你是说你想要你的页面结构为：

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

但仍显示正确的菜单项下的子菜单？

如果是这样，从你的jsfiddle代码更改$("div.copy:eq("+i+")").toggle().siblings("div.copy").hide();到

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

基本上是什么做的是移动的子菜单上的第一次点击正确的位置，然后隐藏div.copy元素的其余部分。

以下是您在JSFiddle上修改的示例：http://jsfiddle.net/pjHu3/

来源

2012-03-05 03:18:41 Raintree

显示/隐藏jQuery脚本

回答

相关问题