다른 아코디언을 AngularJS에서 열었을 때 AngularJS 아코디언을 닫는 방법

AngularJS 아코디언을 사용하고 있습니다. 내가 좋아하는 여러 아코디언을 사용하고 때 아코디언 1, 아코디언 2, 아코디언 3도, 나는 두 번째 아코디언을 클릭하면 내가 처음 아코디언을 클릭 아코디언이 열리고, 두 번째 아코디언 열립니다. 내 문제는 : 첫 번째 아코디언을 열면 다른 아코디언이 다시 닫히는 것을 어떻게 확인할 수 있습니까?다른 아코디언을 AngularJS에서 열었을 때 AngularJS 아코디언을 닫는 방법

는 여기서,이를 달성하기 위해 각 UI 부트 스트랩을 사용하는 것이 더 쉬울 수도 있습니다 내 코드 여기

<div> 
    <button class="accordion"><b>Mens</b> 
    </button> 
    <div class="panel"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 
    <button class="accordion"><b>Womens</b> 
    </button> 
    <div class="panel"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 
    <button class="accordion"><b>Kids</b> 
    </button> 
    <div class="panel"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
    </div> 

</div>

내 CSS 스타일

button.accordion { 
     background-color: #e6e6e6; 
     color: #444; 
     cursor: pointer; 
     padding: 11px; 
     width: 100%; 
     border: none; 
     text-align: left; 
     outline: none; 
     font-size: 12px; 
     transition: 0.4s; 
     border-left: 5px solid #4d4dff; 
    } 

    button.accordion.active, 
    button.accordion:hover { 
     background-color: #d9d9d9; 
    } 

    div.panel { 
     padding: 0 18px; 
     background-color: #f2f2f2; 
     max-height: 0; 
     overflow: hidden; 
     transition: 0.6s ease-in-out; 
     opacity: 0; 
     margin-bottom: 8px; 
    } 

    div.panel.show { 
     opacity: 1; 
     max-height: 500px; 
    }

출처

2016-07-22 Midhunsai

당신이 각 사용하고 있기 때문에입니다.

<uib-accordion close-others="oneAtATime"> 
    <div uib-accordion-group class="panel-default" heading=""> 
     This content is straight in the template. 
    </div> 
    <div uib-accordion-group class="panel-default" heading="Women"> 
     This content is straight in the template. 
    </div> 
    <div uib-accordion-group class="panel-default" heading="Kids"> 
     This content is straight in the template. 
    </div> 
</uib-accordion>

를 한 다음 이런 식으로 뭔가 보이는 컨트롤러 것이다 : 나는이 문서에서이 거의 똑바로 뽑아

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) { 
    $scope.oneAtATime = true; 
});

을이처럼 사용할 수있는 아코디언에 대한 지침이있다 이는 여기서 볼 수 있습니다

https://angular-ui.github.io/bootstrap/

이 아코디언하지만 ㄱ 것 하나를 구성하기위한 선택의 여지가있다 가장 관심있는 부분은 내가 아코디언에 전달하는 클로즈드 (close-others) 옵션입니다. $ scope에 true 값을 가진 부울이 있음을 알 수 있습니다. 이로 인해 다른 패널이 열려있을 때 다른 패널이 붕괴됩니다.

출처

2016-07-22 12:48:04 instantaphex

다른 아코디언을 AngularJS에서 열었을 때 AngularJS 아코디언을 닫는 방법

답변

관련 문제