2013-01-08 3 views
0

정렬되지 않은 목록에서 jquery slidetoggle 효과를 만들려고합니다. 이 토글이 켜지지만 즉시 다시 슬라이드됩니다. 내 CSS 또는 내 jquery 경우 알아낼 수 없습니다. BTW 나는 jsfiddle 내 css, html 및 jquery의보기입니다 그래서 어떤 이유로 내 jsfiddle 함께 작동하도록 얻을 수 없습니다. 여기 jquery slidetoggle이 켜져 있지 않습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled 1</title> 
<meta name="Microsoft Theme" content="HDRDefault 1011, default" /> 

</head> 
<body> 
<div class="container"> 
    <div class="expand-all">Expand All</div><div class="collapse-all">Collapse All</div> 
    <UL class="accordion"> 
    <LI class="accordion-item"> 
     <DIV class="accordion-header">Question2</DIV> 
     <DIV class="accordion-content"> 
     <DIV class="Externa">Answer2..Answer2..Answer2..Answer2..Answer2..Answer2..Answer2..</DIV>  
     </DIV> 
    </LI> 

    <LI class="accordion-item"> 
     <DIV class="accordion-header">Question12</DIV> 
     <DIV class="accordion-content"> 
     <DIV class="Externa">Answer12..Answer12..Answer12..Answer12..Answer12..Answer12..Answer12..</DIV>  
     </DIV> 
    </LI> 
    </UL> 
    </div> 
</body> 
</html> 

가 jsfiddle입니다 ..

function accordionLoad() { 

    $(".accordion-header").removeClass("expanded"); 
    $(".accordion-content").hide(); 

    $(".accordion-header").bind("click", function(){ 
     $(this).toggleClass("expanded"); 
     $(this).next(".accordion-content").slideToggle(); 
    }) 

    $(".expand-all").bind("click",function(){ 
     $(this).siblings(".accordion").find(".accordion-content").slideDown(); 
     $(this).siblings(".accordion").find(".accordion-header").addClass("expanded"); 
    }) 

    $(".collapse-all").bind("click",function(){ 
     $(this).siblings(".accordion").find(".accordion-content").slideUp(); 
     $(this).siblings(".accordion").find(".accordion-header").removeClass("expanded"); 
    }) 
} 

$(document).ready(function(){ 
    accordionLoad(); 
}); 

과 HTML : 여기 내가 사용하고있는 JQuery와는 ... http://jsfiddle.net/9CNeX/8/

+3

http://jsfiddle.net/9CNeX/9/ <프레임 워크 드롭 다운에서 "jQuery"를 선택하지 않았습니다. 거기에 문제가 보이십니까? –

+0

그래서 내 코드에는 아무 문제가 없다는 것을 알려주지 만, 이것을 구현하는 셰어 포인트 사이트에 있으며 슬라이더는 켜져 있지만 켜지지는 않습니다. 즉시 멈추지 않습니다. 왜 이렇게 될 수 있습니까? – Athapali

+0

이 JavaScript와 충돌하는 다른 JavaScript가 있습니까? –

답변

0

이 예제를 참조하십시오

jsfiddle

$('.accordion-header').on('click', function(e){ 
    $(this).next().slideToggle(); 
}); 

인사말.

관련 문제