jqueryスクリプトの表示/非表示

Question

私はshow | hideスクリプトを持っています。この作品の良いが、私は私のスキーマ

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

Answer 1

を言っているのかにしたいです構造：

<!-- 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:eq("+i+")").insertAfter(this).toggle(); 
$("div.copy:not(:eq("+i+"))").hide(); 

にあなたからJSFiddleコードを$("div.copy:eq("+i+")").toggle().siblings("div.copy").hide();を変更基本的にそれが何を最初のクリック上の正しい位置にサブメニューを移動し、div.copy要素の残りの部分を隠しています。ここで

はJSFiddleに変更した例です：http://jsfiddle.net/pjHu3/