왜 내 아코디언 목록은 계속 닫히고 있습니까?

Question

아코디언 목록이 포함 된 사이드 메뉴를 만들었습니다. 페이지를로드 할 때 페이지로드시 활성화되도록 코딩 되었기 때문에 아코디언 목록의 섹션 하나가 열려 있습니다. 그러나 다른 섹션을 열려고 시도하면 섹션이 열리지 만 곧 닫힙니다. 누군가 내가 잘못 가고 있다고 말할 수 있습니까?

목록 코드 :

<ion-content class="has-header" id="accordian"scroll="false" ng-controller="MainCtrl"> 
    <ul> 
    <li class="active"> 
     <h3><span class="icon-dashboard"></span>Group 1</h3> 
     <ul> 
     <li ng-repeat="card in cards"><a href="#">{{ card.title }}</a></li> 
     </ul> 
    </li> 
    <!-- we will keep this LI open by default --> 
    <li> 
     <h3><span class="icon-tasks"></span>Group 2</h3> 
     <ul> 
     <li ng-repeat="card in cards"><a href="#">{{ card.title }}</a></li> 
     </ul> 
    </li> 
    <li> 
     <h3><span class="icon-calendar"></span>Group 3</h3> 
     <ul> 
     <li ng-repeat="card in cards"><a href="#">{{ card.title }}</a></li> 
     </ul> 
    </li> 
    </ul> 

JS : 아코디언의

$(document).ready(function(){ 
    $("#accordian h3").click(function(){ 
    //slide up all the link lists 
    $("#accordian ul ul").slideUp(); 
    //slide down the link list below the h3 clicked - only if its closed 
    if(!$(this).next().is(":visible")) 
    { 
     $(this).next().slideDown(); 
    } 
    }) 
}) 

Answer 1

다음 요소가 표시되는지 여부를 테스트하기 전에 slideUp 함수 실행이 완료 될 때까지 기다려야합니다 (by default the duration is 400ms).

$(document).ready(function(){ 
    $("#accordian h3").click(function(){ 
    //slide up all the link lists 
    $("#accordian ul ul").slideUp(); 
    //slide down the link list below the h3 clicked - only if its closed 
     var $elemH3 = $(this); 
     setTimeout(function() { 
      if(!$elemH3.next().is(":visible")) 
      { 
       $elemH3.next().slideDown(); 
      } 
     }, 401); 

    }) 
}) 

쉽게 예 볼이 작업을 수행하는 일부 CSS를 사용할 수 있습니다

:

CSS 코드

li.active ul { 
    display:block; 
} 
li ul { 
    display: none; 
} 

JS와 HTML 코드 : http://jsfiddle.net/nx2LkoLd/ 당신은 모든 섹션이 아닌 활성을 숨기기 여전히 동일합니다.

희망이 있으니 문제를 해결하는 데 도움이됩니다.

Answer 2

기본 위치를 확장하기 위해 $(document).ready의 시작에 넣어 ... 축소되어 있습니다.

$('#accordian').collapse({toggle: true}); 

편집 : 귀하의 경우

: 당신이 당신의 아코디언은 ready 이벤트의 독립적 인 확장하려는 경우

$(document).ready(function(){ 
    $('#accordian').collapse({toggle: true}); 

}); 

또는 ... 당신은 어디에서이 줄을 넣을 수 있습니다 당신의 js 파일 (다른 것을 제외하고 function) :

$(function() { $('#accordian').collapse({toggle: true}); }); 

둘 다 작동하지만, 자신의 기능이 작동하는지 확신 할 수 없으므로 조심하십시오. 미안해. 시험 할 시간 없어. ;)