아코디언이 제대로 작동하지 않습니다.

Question

아코디언과 비슷한 기능을 보여 주어야합니다. 아코디언은 입니다. jquery는 jquery의 사용자 지정 기능을 만들어 효과를냅니다.

여기에는 두 개의 div가있는 격자보기가 있습니다.

<asp:GridView ID="grdAccordion" runat="server" AutoGenerateColumns="false" Width="200px"> 
      <Columns> 
       <asp:TemplateField> 
        <ItemTemplate> 
         <div class="myFirstDiv" onclick="testToggle(this)"> 
         <%#Eval("Name")%> 
          <div class="mySecondDiv" style="display:none"> 
          <%#Eval("Person_Name")%> 
          </div> 
         </div> 
        </ItemTemplate> 
       </asp:TemplateField> 
      </Columns> 
     </asp:GridView> 

두 번째 div에는 스타일 속성 표시 없음이 있습니다. 기본적으로 모든 div가 닫힙니다.

나는 toggle 함수를 사용하여 작업 코드를 수행하는 js 함수를 만들었습니다.

function testToggle(testDiv) { 
     debugger 
      var sntHdnValue = $('#hdnSetFlag').val(); 
      if (sntHdnValue == 1) { 
       $(testDiv).find('div:first').show().attr('isOpen', 'true'); 
      } 
      else { 
      $(testDiv) 
      .parents('table:first') 
      .find('div[isOpen=true]').removeAttr('isOpen').toggle('slow'); 
      $(testDiv).find('div:first').show().attr('isOpen', 'true'); 
      } 
      sntHdnValue++; 
      $('#hdnSetFlag').val(sntHdnValue); 
     } 

여기

내가 나에게이 모든 것은 내가 내 식별

1) 현재의 상황에 대한 사용자 지정 ATTR의 ISOPEN를 추가하고 폐쇄 된 초기 상태 인 것을 알고하자 숨겨진 필드의 사용을 만들었습니다 이게 짐작 이네요. 2) 한 번에 하나의 div 만 열려 있어야합니다.

괜찮습니다.

문제는 내가 두 번째 사용자 정의 attr isopen을 가지고있는 보다 더 열려고 클릭 한 동일한 div를 클릭하는 것입니다. 두 번째 경우가 중단됩니다. 어떻게 해결할 수 있습니다.

Answer 1

해결 방법이 있습니다.

업데이트 된 기능.

var glDivID = 0; 
     function testToggle(testDiv) { 
     debugger 
     var sntHdnValue = $('#hdnSetFlag').val(); 
     var dvID = $(testDiv).attr('id'); 
     if (sntHdnValue == 1) { 
       $(testDiv).find('div:first').show().attr('isOpen', 'true'); 
      } 
      else { 
      $(testDiv) 
      .parents('table:first') 
      .find('div[isOpen=true]').removeAttr('isOpen').toggle('slow'); 
      if (glDivID != dvID) { 
       $(testDiv).find('div:first').show().attr('isOpen', 'true'); 
      } 
      } 
      sntHdnValue++; 
      $('#hdnSetFlag').val(sntHdnValue); 
      glDivID = dvID; 
     } 

난은 자기 클릭인지 여부를 시험하기위한 grid.checked 동일한 데이터를 추가시의 ID를 첨부 여부는 트릭 않습니다