HTML CSS jQuery 2-Tier 메뉴 문제

그래서이 슈퍼 스트립 된 html CSS jquery 탐색 메뉴 버전을 만들고 아래 코드를 사용하여 포함 된 li 인 것처럼 하위 메뉴 항목을 처리합니다. 나는 그것이 하위 메뉴 ul을 리의 일부로 보는 것을 이해할 수 있다고 생각합니다. 문제는 하위 메뉴 링크를 실제로 따르고 preventDefaulted하지 않도록 해당 동작을 분리하는 방법이됩니다.HTML CSS jQuery 2-Tier 메뉴 문제

<html> 
<head> 
<style type="text/css"> 
    #content ul {margin:0;} 
    #content ul li {float:left; background:#000; list-style:none;} 
    #content ul li a {display:block; text-decoration:none; padding:10px 40px;} 
    #content ul li ul {position:absolute; padding:0;} 
    #content ul li ul li {float:none; background:#ccc;} 
</style> 
</head> 

<body> 
<div id="content"> 
    <ul> 
     <li><a href="#">1</a></li> 
     <li><a href="#">2</a></li> 
     <li> 
      <a href="#">3</a> 
      <ul> 
       <li><a href="#">A</a></li> 
       <li><a href="#">B</a></li> 
       <li><a href="#">C</a></li> 
       <li><a href="#">D</a></li> 
      </ul> 
     </li> 
     <li><a href="#">4</a></li> 
    </ul> 
</div>   
</body> 
</html> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
<script type="text/javascript"> 
$('#content ul li').has('ul').click(function(e) { 
    /* code to show/hide submenus */ 

    console.log(e); 
    e.preventDefault(); 
}); 
</script>

편집 : 모든 최상위 링크와 하위 메뉴 링크가 정상적으로 작동하기를 원합니다. 내가 조작하려고하는 유일한 일은 하위 메뉴가있는 최상위 수준의 li입니다. 이 같은 '내용'의 첫 번째 자식 앵커을 대상으로, 그래서 당신은 당신의 초기 선택을 변경하는 경우

출처

2011-11-18 Oscar

$('#content > ul > li > a').click(function(e) { 
    /* code to show/hide submenus */ 

    console.log(e); 
    e.preventDefault(); 
});

이 작동합니다. 클릭 이벤트를 대신 바인딩하려는 각 앵커 태그에 CSS 클래스를 추가하는 것이 좋습니다. 그러면 마크 업이 변경 될 때 훨씬 더 깔끔 해지고 중단 될 가능성이 줄어 듭니다.

<div id="content"> 
    <ul> 
     <li><a class="mainNav" href="#">1</a></li> 
     <li><a class="mainNav" href="#">2</a></li> 
     <li> 
      <a class="mainNav" href="#">3</a> 
      <ul> 
       <li><a href="#">A</a></li> 
       <li><a href="#">B</a></li> 
       <li><a href="#">C</a></li> 
       <li><a href="#">D</a></li> 
      </ul> 
     </li> 
     <li><a class="mainNav" href="#">4</a></li> 
    </ul> 
</div>

및

$("#content .mainNav").click(function(e) { e.preventDefault(); });

업데이트

원래 대답은 정말 가까이했다. 문제는 당신이 모든 하위 요소를 선택했다는 것이 었습니다. 이 문제를 해결하기 위해 자식 선택기를 추가했습니다.

$('#content ul li').has('ul').children('a').click(function(e) { 
    /* code to show/hide submenus */ 

    console.log(e); 
    e.preventDefault(); 
});

출처

2011-11-18 22:58:37

첫 번째 비트는 모든 최상위 링크를 끊습니다. 하위 메뉴가 들어있는 메뉴 만 조작하고 싶습니다. 클래스를 추가하면 실제로 쉽게 만들 수 있지만 내가 들어 가지 않을 이유 때문에 그 사치품을 갖고 있지는 않습니다. bla bla bla 프레임 워크 탐색 메뉴. – Oscar

업데이트가 머리에 맞습니다. woot! 감사! – Oscar

HTML CSS jQuery 2-Tier 메뉴 문제

답변

관련 문제