2012-03-16 6 views
0

jQuery 아코디언 메뉴가 있는데 어떤 지점에서 레벨 중 하나를 펼치지 않으려 고합니다 (아코디언을 열지 않고 클릭 할 수 있음을 알고 있습니다.)) 나는 그것을 알아낼 수 없거나 그것을하는 방법에 대한 문서를 찾을 수 없습니다.jQuery UI 아코디언 (비 아코디언 레벨)

내 샘플 코드의 두 번째 수준을 살펴보십시오. 나는 비어있는 채로 두려고 노력했다. 나는 열리고 닫히는 div 태그를 시도했다. 그리고 나는 또한 당신이 열리고 닫은 UL 태그 아래에 보이는 것을 시도했다. 그리고 각각은 그 빈 곳을 떠나는 그 레벨에서 아코디언으로 메뉴를 만든다. 어떤 제안?

<div id="accordion"> 
    <h3><a class="link" href="yourlink.html">Masters Of Arts</a></h3> 
    <ul></ul> 
</div> 

그런 다음, jQuery를 사용하면 아코디언을 여는 링크를 중지 할 수 있습니다 : 당신이 열려있는 링크가 할 목록 항목에 클래스를 추가한다면 어떤

<script> 
$.ui.accordion.animations.superbounce = function(options) { 
    this.slide(options, { 
      autoHeight: false, 
      duration: options.down ? 2000 : 500, 
      duration: options.up ? 2000 : 500 
    }); 

}; 
$(document).ready(function() { 
    $(function() { 
     $("#accordion").accordion({animated: 'superbounce'}); 
    }); 
}); 

</script> 
<div id="accordion"> 
<h3><a href="#">Masters Of Arts</a></h3> 

    <ul> 
     <li><a href="#">Business Psychology</a></li> 
     <li><a href="#">Criminology and Justice Studies</a></li> 
     <li><a href="#">Educational Leadership</a></li> 
     <li><a href="#">Executive Coaching</a></li> 
     <li><a href="#">Health and Wellness Psychology</a></li> 
    </ul> 

<h3><a href="#">Masters Of Arts</a></h3> 

<ul></ul> 

<h3><a href="#">Doctor of Philosophy</a></h3> 

    <ul> 
     <li><a href="#">Business Psychology</a></li> 
     <li><a href="#">Criminology and Justice Studies</a></li> 
     <li><a href="#">Educational Leadership</a></li> 
     <li><a href="#">Executive Coaching</a></li> 
     <li><a href="#">Health and Wellness Psychology</a></li> 
    </ul> 

<h3><a href="#">Doctor of Psychology</a></h3> 

    <ul> 
     <li><a href="#">Business Psychology</a></li> 
     <li><a href="#">Criminology and Justice Studies</a></li> 
     <li><a href="#">Educational Leadership</a></li> 
     <li><a href="#">Executive Coaching</a></li> 
     <li><a href="#">Health and Wellness Psychology</a></li> 
    </ul> 

<h3><a href="#">Masters Of Arts 2</a></h3> 

    <ul> 
     <li><a href="#">Business Psychology</a></li> 
     <li><a href="#">Criminology and Justice Studies</a></li> 
     <li><a href="#">Educational Leadership</a></li> 
     <li><a href="#">Executive Coaching</a></li> 
     <li><a href="#">Health and Wellness Psychology</a></li> 
    </ul> 

<h3><a href="#">Masters Of Arts 3</a></h3> 

    <ul> 
     <li><a href="#">Business Psychology</a></li> 
     <li><a href="#">Criminology and Justice Studies</a></li> 
     <li><a href="#">Educational Leadership</a></li> 
     <li><a href="#">Executive Coaching</a></li> 
     <li><a href="#">Health and Wellness Psychology</a></li> 
    </ul> 

</div> 
+0

jQuery 코드는 어디에 있습니까? – j08691

+0

아코디언을 초기화하기 위해 포함되었지만 실제로는 관련이 없습니다. 그러나 그것이 도움이된다면, 지금 그곳에 있습니다. – RAC

+0

이 질문의 경계선 복제본 : http://stackoverflow.com/questions/1135466/jquery-accordion-prevent-bubbling-allow-default-link-action (이 질문의 목표는 다르지만 아코디언 유지에 여전히 중점을두고 있습니다. 창에서 링크를 클릭하면 열리지 않습니다.) – Dave

답변

0

$(".link").click(function(e){ 
    e.preventDefault(); 
} 

참고로 실제로 테스트하지는 않았지만 한 번 사용해 볼 가치가 있습니다.

+0

preventDefault()는 항목에 대한 일반적인 브라우저 조치를 방지합니다. 반대로 stopPropagation()은 항목에 대한 jQuery 이벤트를 방지하고 아코디언 확장을 중지합니다. – Dave

0

@Dave와 @ Ryan 사이 나는 대답에 도착했습니다. @Ryan는 @ 데이브 내가 할 필요가 모든 대신로 preventDefault의 사용 인 stopPropagation이었고, 그 트릭, 고마워했다 누락 된 성분을

$(".link").click(function(e){ 
    e.stopPropagation(); 
} 

를 추가로 올바른 생각

<div id="accordion"> 
    <h3><a class="link" href="yourlink.html">Masters Of Arts</a></h3> 
    <ul></ul> 
</div> 

했다.