부트 스트랩 축소 력 모두 펼치기

고유 붕괴 요소가있는 여러 섹션이 있습니다. 나는 jquery를 확장하고 붕괴시키기 위해 이미 구현했다.부트 스트랩 축소 력 모두 펼치기

jQuery를 :

$('.collapse').each(function (index) { 
    $(this).collapse("toggle"); 
});

HTML 코드 조각 :

나는 데 몇 가지 문제가 있습니다

<ul class="nav nav-tabs"> 
    <li class="active" id="General"><a href="#">General</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane active">                                            
     <div class="accordion" id="accordion2">             
      <div class="accordion-group"> 
       <div class="accordion-heading"> 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseFour">Q. Can I choose my own Username and Password?</a> 
       </div> 
       <div id="collapseFour" class="accordion-body collapse"> 
        <div class="accordion-inner">A. Yes, you can choose your own Username and Password. We suggest using your email address for your Username, but any username that is between 8 and 20 characters long could be used. A secure Password should be 8 to 20 characters long, with no spaces, and contains at least one special character. </div> 
       </div> 
      </div> 
      <div class="accordion-group"> 
       <div class="accordion-heading"> 
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseFive">Q. Can I update by email address online?</a> 
       </div> 
       <div id="collapseFive" class="accordion-body collapse"> 
        <div class="accordion-inner">A. Yes, but I have no idea how right now. </div> 
       </div> 
      </div> 
     </div> 
    <a href="#top" class="btn btn-mini top"><i class="icon-arrow-up"></i> Back To Top</a> 
</div>

http://jsfiddle.net/RmK2h/

Internet Explorer에서이 기능은 두 번째 클릭에서만 작동하며 매우 뛰어납니다. 두 번째 클릭으로 작업하면 버튼 텍스트가 올바르지 않습니다.
요소 중 하나를 연 다음 확장 버튼을 클릭하면 모든 요소가 원래 열린 열 이외의 모든 요소로 확장되어 축소됩니다. 본질적으로 .collapse("toggle") 기능은 단순히 하나 열어 모드를 변경하거나 그것에서 이미 상태에 관심없는 마감했다.

출처

2013-02-22 Jon Harding

는 부트 스트랩의 문제입니다. 약간의 인터넷 검색에서 어떤 형태로든 다른 모든 릴리스에서 기능이 깨지는 것처럼 보입니다. 따라서, 당신이 collapse 함수가 아닌 다른 것을 사용하지 않는다면, 나는 그것을 고칠 수 있을지 확신하지 못합니다. 나는 일종의 IE에 고정 (확장/축소 버튼은 더 이상 동기화하지 않는 것)이 코드 두 번째 문제를 해결 :

$('.expandcollapse').click(function() { 
    if ($(this).html() == "<i class=\"icon-white icon-plus-sign\"></i> Expand All") { 
     $('.collapse:not(.in)').each(function (index) { 
      $(this).collapse("toggle"); 
     }); 
     $(this).html("<i class=\"icon-white icon-minus-sign\"></i> Collapse All"); 
    } 
    else { 
     $('.collapse.in').each(function (index) { 
      $(this).collapse("toggle"); 
     }); 
     $(this).html("<i class=\"icon-white icon-plus-sign\"></i> Expand All"); 
    }; 
});

Fiddle

출처

2013-02-22 16:31:12 Samsquanch