2012-03-05 5 views
0

나는 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> 
+4

무엇이 질문입니까? –

+0

나는 jquery 스크립트를 보여주고있다. 그러나 숨길 필요가있다.하지만 모든 링크가 정상적으로 표시되지만, 내 페이지의 아래쪽에서 div를 숨기고 링크를 클릭하면 링크 아래에 div가 표시되는 html 구조를 수정해야한다. 지금 여기에 : http://jsfiddle.net/kolxoznik1/nRf5f/) – Viktors

+0

아직도 당신의 질문을 이해하지 못합니다. HTML에서'product_menu_categories' 링크 아래에'product_menu_link' 링크가 나타나도록 (보이기/가리기)하고 싶습니까? – neo108

답변

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/

관련 문제