Jquery ul 하위 메뉴 슬라이드 문제

oscommerce를 사용하여 상점을 만들고 카테고리에 대한 정렬되지 않은 목록을 표시하는 addon을 사용하는 메뉴가 있습니다. 그래서 같은 상향 링크 목록이 표시 ...Jquery ul 하위 메뉴 슬라이드 문제

<ul id='suckertree1'><li><a href='index.php?cPath=21'>Summer</a> 
     <ul> 
      <li> 
      <a href='index.php?cPath=21_23'>Bikes</a> 
      <ul> 
      <li><a href='index.php?cPath=21_23_28'>E-Bikes</a></li> 
      <li><a href='index.php?cPath=21_23_27'>Mountainroad</a></li> 
      <li><a href='index.php?cPath=21_23_26'>Road Bikes&nbsp;(1)</a></li> 
     </ul> 
    </li> 
    <li><a href='index.php?cPath=21_24'>Clothing</a> 
    <ul> 
     <li><a href='index.php?cPath=21_23_28'>Gloves</a></li> 
     <li><a href='index.php?cPath=21_23_27'>Shoes</a></li> 
     <li><a href='index.php?cPath=21_23_26'>Protection</a></li> 
    </ul> 

</li> 
    </ul> 
    </li> 
    <li> 
    <a href='index.php?cPath=22'>Winter</a> 
    </li> 
    </ul>

나는 메뉴의 일부를 숨기기 위해 jQuery를 사용하고 있습니다. 자전거를 클릭하면 그 자전거의 하위 메뉴가 표시됩니다. 내가 가진 문제는 하위 메뉴 링크가 나는,

여기

이 때문에이 메뉴와 한계 내 (끔찍한) jQuery 코드

$(document).ready(function() { 
    $("ul#suckertree1 li ul li ul").hide(); 
    $("ul#suckertree1 li ul li a").click(function(e) { 
     e.preventDefault(); 
     $("ul#suckertree1 li ul li ul").slideToggle(); 
    }); 
});

입니다 .. 그들이 다시 메뉴를 닫고, 연결하지 않는 것이있다 이미 # suckertree1 이외의 메뉴에 클래스 나 ID를 할당 할 수 없습니다. preventDefault()가 하위 메뉴 점에 영향을 미치지 않도록하려면 어떻게해야합니까? 아래의 하위 메뉴 만 전환하려면 항목을 클릭하십시오.

감사

제임스 대신이의

출처

2010-08-04 James Ison

: 그것은 당신이이 같은 .siblings() 또는 .next()를 사용하여 얻을 꽤 쉽게 클릭 한 <a> 옆 이후

$("ul#suckertree1 li ul li ul").slideToggle();

는 상대적으로 <ul> 찾기 :

$(this).siblings('ul').slideToggle();

그래서 이렇게보고 싶은데 :

$(function() { 
    $("ul#suckertree1 li ul li ul").hide(); 
    $("ul#suckertree1 li ul li:has(ul) > a").click(function(e) { 
    $(this).siblings('ul').slideToggle(); 
    e.preventDefault(); 
    }); 
});

You can give it a try here

이 또한 :has() 및 the child selector (>)를 사용하여 작업 하위 메뉴 링크를 해결합니다. 우리가하는 일은이 핸들러를 <li> 인 도에있는 링크에 바인딩하는 것입니다. <ul> 요소가 있습니다. 그것은 하나의 하위 메뉴가 없다면이 코드는 해당 앵커에 대해 실행되지 않으며 단지 계속해서 그 코드를 따르는 것입니다 (보통 href).

출처

2010-08-04 09:47:21

Jquery ul 하위 메뉴 슬라이드 문제

답변

관련 문제