顯示/隱藏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腳本

回答

相關問題