탐색이 토글되지 않습니다

Question

두 개의 메뉴 항목에 드롭 다운 하위 메뉴가있는 탐색 기능이 있습니다.

현재 jQuery를 클릭하면이 두 가지를 표시 할 수 있지만 두 가지를 표시 할 수는 있지만 다시 클릭하거나 숨길 수는 없습니다 (표시된 상태로 유지됨). 나는 그들에게 서로 토글을하고, 클릭하고 숨길 때 토글 할 필요가있다.

모바일/터치 장치에 클릭 이벤트를 사용하고 있으므로 if else 문을 사용할 수 없습니다. 나는 바탕 화면 장치에 대한 호버 상태에 대한 경우 다른 문을 사용하고이

JSFIDDLE

$(document).ready(function() { 
     // click show sub menu 
     $('ul.sub-menu').hide(); 
     $('#nav-1 li').click(function() { 
      $('ul.sub-menu').hide(); 
      $(this).find('ul.sub-menu').show(); 
     }); 

}); 

누구나 어떤 아이디어가 어떻게 두 개의 토글 함께 기능을 병합있어 잘 작동?

필자도 .toggle();을 시도했지만 여전히 문제가 있습니다.

편집 : 표시/숨기기와 링크 및 사용을 사용으로 전환 : http://jsfiddle.net/LPrMy/6/

Answer 1

나는 당신의 숨기기() 함수는 어떻게 든 항목의 게재 덤비는 것을 생각하고, 전환뿐만 아니라이 시나리오에 더 좋다. 여기 :)

$(document).ready(function() { 
      // click show sub menu 
      $('ul.sub-menu').hide(); 
      $('#nav-1 li').click(function() { 
       $(this).siblings('li').find('ul.sub-menu').hide(); 
       $(this).find('ul.sub-menu').toggle(); 
      }); 

    }); 

http://jsfiddle.net/LPrMy/4/

Answer 2

당신은 올바른 선택에 문제가 있습니다.

$('#nav-1 li').click(function() { 
    $('ul.sub-menu').hide(); 
    $(this).children().next().toggle(); 
}); 

업데이트 바이올린 : http://jsfiddle.net/LPrMy/9/