jQuery的開放和子導航是去兩層深

Question

代碼的JS小提琴可以在這裏找到的密切：http://jsfiddle.net/wBLLQ/4/

菜單結構：

<nav id="subnav"> <a href="#" class="arrow-button mobile">Sub Nav Button<i class="ss-icon ss-gizmo">&#xF501;</i></a> 
<!-- color class on button --> 
    <ul class="sub-nav"> 
     <!-- color class for sub navigation --> 
     <li class="section-home"><a href="#" class="default">Section Home<i class="ss-icon ss-gizmo">&#x25BB;</i></a></li> 
     <li class="level-1"><a href="#">Employment</a><!-- active --> 
      <ul class="level-2"> 
       <li><a href="#">Identifying your skills</a></li> 
       <!-- active --> 
       <li><a href="#">Finding a job</a></li> 
       <li><a href="#">Employing a person with a disability</a></li> 
       <li><a href="#">Your rights in the workplace</a></li> 
       <li><a href="#">Financial Assistance for jobseekers</a></li> 
       <li><a href="#">Work experience &amp; volunteering</a></li> 
      </ul> 
     </li> 
     <!-- end 1st level --> 
     <li class="level-1"><a href="#">Independent Living</a> 
      <ul class="level-2"> 
       <li><a href="#">Identifying your skills</a></li> 
       <li><a href="#">Finding a job</a></li> 
       <li><a href="#">Employing a person with a disability</a></li> 
       <li><a href="#">Your rights in the workplace</a></li> 
       <li><a href="#">Financial Assistance for jobseekers</a></li> 
       <li><a href="#">Work experience &amp; volunteering</a></li> 
      </ul> 
     </li> 
     <!-- end 1st level --> 
     <li class="level-1"><a href="#">Education</a> 
      <ul class="level-2"> 
       <li><a href="#">Identifying your skills</a></li> 
       <li><a href="#">Finding a job</a></li> 
       <li><a href="#">Employing a person with a disability</a></li> 
       <li><a href="#">Your rights in the workplace</a></li> 
       <li><a href="#">Financial Assistance for jobseekers</a></li> 
       <li><a href="#">Work experience &amp; volunteering</a></li> 
      </ul> 
     </li> 
     <!-- end 1st level --> 
     <li class="level-1"><a href="#">Parenting with a disability</a> 
      <ul class="level-2"> 
       <li><a href="#">Identifying your skills</a></li> 
       <li><a href="#">Finding a job</a></li> 
       <li><a href="#">Employing a person with a disability</a></li> 
       <li><a href="#">Your rights in the workplace</a></li> 
       <li><a href="#">Financial Assistance for jobseekers</a></li> 
       <li><a href="#">Work experience &amp; volunteering</a></li> 
      </ul> 
     </li> 
     <!-- end 1st level --> 
     <li class="level-1"><a href="#">Parents of a child with a disability</a><!-- active --> 
      <ul class="level-2"> 
       <li><a href="#">Identifying your skills</a></li> 
       <!-- active --> 
       <li><a href="#">Finding a job</a></li> 
       <li><a href="#">Employing a person with a disability</a></li> 
       <li><a href="#">Your rights in the workplace</a></li> 
       <li><a href="#">Financial Assistance for jobseekers</a></li> 
       <li><a href="#">Work experience &amp; volunteering</a></li> 
      </ul> 
     </li> 
     <!-- end 1st level --> 
     <li class="level-1"><a href="#">Sport</a> 
      <ul class="level-2"> 
       <li><a href="#">Identifying your skills</a></li> 
       <li><a href="#">Finding a job</a></li> 
       <li><a href="#">Employing a person with a disability</a></li> 
       <li><a href="#">Your rights in the workplace</a></li> 
       <li><a href="#">Financial Assistance for jobseekers</a></li> 
       <li><a href="#">Work experience &amp; volunteering</a></li> 
      </ul> 
     </li> 
     <!-- end 1st level --> 
     <li class="level-1"><a href="#">Legal Information</a> 
      <ul class="level-2"> 
       <li><a href="#">Identifying your skills</a></li> 
       <li><a href="#">Finding a job</a></li> 
       <li><a href="#">Employing a person with a disability</a></li> 
       <li><a href="#">Your rights in the workplace</a></li> 
       <li><a href="#">Financial Assistance for jobseekers</a></li> 
       <li><a href="#">Work experience &amp; volunteering</a></li> 
      </ul> 
     </li> 
     <!-- end 1st level --> 
     <li class="level-1"><a href="#">Newly Disabled</a> 
      <ul class="level-2"> 
       <li><a href="#">Identifying your skills</a></li> 
       <li><a href="#">Finding a job</a></li> 
       <li><a href="#">Employing a person with a disability</a></li> 
       <li><a href="#">Your rights in the workplace</a></li> 
       <li><a href="#">Financial Assistance for jobseekers</a></li> 
       <li><a href="#">Work experience &amp; volunteering</a></li> 
      </ul> 
     </li> 
     <!-- end 1st level --> 
     <li class="level-1"><a href="#">Relationship &amp; Fertility</a> 
      <ul class="level-2"> 
       <li><a href="#">Identifying your skills</a></li> 
       <li><a href="#">Finding a job</a></li> 
       <li><a href="#">Employing a person with a disability</a></li> 
       <li><a href="#">Your rights in the workplace</a></li> 
       <li><a href="#">Financial Assistance for jobseekers</a></li> 
       <li><a href="#">Work experience &amp; volunteering</a></li> 
      </ul> 
     </li> 
     <!-- end 1st level --> 
     <li class="level-1"><a href="#">Travel</a> 
      <ul class="level-2"> 
       <li><a href="#">Identifying your skills</a></li> 
       <li><a href="#">Finding a job</a></li> 
       <li><a href="#">Employing a person with a disability</a></li> 
       <li><a href="#">Your rights in the workplace</a></li> 
       <li><a href="#">Financial Assistance for jobseekers</a></li> 
       <li><a href="#">Work experience &amp; volunteering</a></li> 
      </ul> 
     </li> 
     <!-- end 1st level --> 
     <li class="level-1"><a href="#">Accessibility</a> 
      <ul class="level-2"> 
       <li><a href="#">Identifying your skills</a></li> 
       <li><a href="#">Finding a job</a></li> 
       <li><a href="#">Employing a person with a disability</a></li> 
       <li><a href="#">Your rights in the workplace</a></li> 
       <li><a href="#">Financial Assistance for jobseekers</a></li> 
       <li><a href="#">Work experience &amp; volunteering</a></li> 
      </ul> 
     </li> 
     <!-- end 1st level --> 
     <li class="level-1"><a href="#">Government</a> 
      <ul class="level-2"> 
       <li><a href="#">Identifying your skills</a></li> 
       <li><a href="#">Finding a job</a></li> 
       <li><a href="#">Employing a person with a disability</a></li> 
       <li><a href="#">Your rights in the workplace</a></li> 
       <li><a href="#">Financial Assistance for jobseekers</a></li> 
       <li><a href="#">Work experience &amp; volunteering</a></li> 
      </ul> 
     </li> 
     <!-- end 1st level --> 
     <li class="level-1"><a href="#">Transition</a> 
      <ul class="level-2"> 
       <li><a href="#">Identifying your skills</a></li> 
       <li><a href="#">Finding a job</a></li> 
       <li><a href="#">Employing a person with a disability</a></li> 
       <li><a href="#">Your rights in the workplace</a></li> 
       <li><a href="#">Financial Assistance for jobseekers</a></li> 
       <li><a href="#">Work experience &amp; volunteering</a></li> 
      </ul> 
     </li> 
     <!-- end 1st level --> 
     <li class="view-all"><a href="#" class="default more">View Menu Itemss<i class="ss-icon ss-gizmo">&#xF501;</i></a></li> 
    </ul> 
    <!-- end sub-nav --> 
</nav> 
<!-- end subnav --> 

的Javascript：

$('#subnav > a').click(function(event){ 
    event.preventDefault(); 
    $('.sub-nav').slideToggle("slow"); 

    $(".level-1 > a").click(function(event){ 
     event.preventDefault(); 

     if(($(this).siblings('.level-2').is(":visible"))) { 

      $(this).siblings('.level-2').slideUp("slow"); 
      $('.view-all > a').slideUp(); 
      $('.level-1 > a').not($(this)).parents('.level-1').slideDown("slow"); 


     } else { 

      if($(".level-2").is(":visible")){ 
       $(".level-2").slideUp("slow"); 
      } 

      $(this).siblings('.level-2').slideDown("slow"); 
      $('.view-all > a').slideDown(); 
      $('.level-1 > a').not($(this)).parents('.level-1').slideUp("slow"); 
     } 

     $(".view-all > a").click(function(event){ 
      event.preventDefault(); 
      $(".level-1").show("slow"); 
      $(this).slideUp(); 
     }); 
    }); 

CSS：

.sub-nav { 
    display: none; 
    background: grey; 
} 

.sub-nav ul { 
    display: none; 
} 

.sub-nav .section-home a { 
    color: red; 
} 

.sub-nav .level-2 a { 
    color: green; 
} 

.sub-nav .view-all a { 
    color: black; 
} 

輔助導航功能性： 當Sub Nav Button按鈕被點擊 - 顯示副NAV，顯示所有第一級導航項。

如果妳然後在第一級導航項目：

• 它顯示的導航項目的第二個層次。
• 隱藏所有其他非相關的第一級子導航項目。
• 顯示一個view all按鈕，可用於顯示所有隱藏的第一級項目。

的view all按鈕，將顯示所有一級項目（不會影響被出示第二層次的項目，如果導航的第二個層次是開放的，將繼續開放）

問題是當第二級導航打開並關閉子導航時。 當你再次打開子導航，二級項目仍然顯示，它與我的jquery衝突，然後點擊一級項目將打開和關閉所有的時間。

我不知道如何編寫我的jQuery的方式，這不會是一個問題。任何幫助，將不勝感激。我對jQuery不太瞭解。

Answer 1

我沒有100％的回答你的問題，但是當你點擊「查看菜單項目」時你想關閉第二級導航？

如果是的話，你可以做到這一點

  $(".view-all > a").click(function(event){ 
       event.preventDefault(); 
       $(".level-1").show("slow"); 
       $(this).slideUp(); 
       $(".level-2").slideUp("slow"); 
      }); 

小提琴更新 http://jsfiddle.net/wBLLQ/5/