Zurb Foundation 아코디언 내부에 중첩 된 Accordion

Question

응답 형 웹 사이트에 Zurb Foundation을 사용하고 있습니다. 내가 아코디언은 다음과 같은 HTML 구조를 사용하여 아코디언 내에 중첩 좀하고 싶습니다 :

<ul class="accordion"> 
    <li class="active"> 
     <div class="title">First Accordion Panel Title</div> 
     <div class="content">First Accordion Panel Content</div> 
    </li> 
    <li> 
     <div class="title">Second Accordion Panel Title</div> 
     <div class="content">Second Accordion Panel Content</div> 
    </li> 
    <li> 
     <div class="title">Parent Accordion Panel Title</div> 
     <div class="content"> 

      <ul class="accordion"> 
       <li class="active"> 
        <div class="title">Child Accordion Panel Title</div> 
        <div class="content">Child Accordion Panel Content</div> 
       </li> 
       ... 
      </ul> 

     </div> 
    </li> 
</ul> 

부모 아코디언 패널이 열이 설정을 가진 것 같은데을, 이후 어린이 아코디언 패널은 적어도 열 (또는 있습니다 일부 플래그는 열린 부모와 같이 화살표가 아래를 가리키고 있기 때문에 열리기로 설정 됨) 하위 아코디언 기능이 중단됩니다. 아마 재단 부모 아코디언 안에 jQuery UI 아코디언을 추가 할 수는 있지만 부모와 같이 반응이 없으므로 Foundation을 처음 사용하는 목적을 무력화시킬 수 있습니다.

누구든지 성공적으로 완료 했습니까?

Answer 1

아코디언 항목에 대한 클릭 이벤트 진행을 중지하기 만하면 하위 아코디언 항목을 클릭하면 하위 항목 이벤트가 상위 항목을 닫지 않습니다.

변경이 쉽습니다. 클릭 핸들러에서 param 이벤트를 추가하고 event.stopPropagation()을 사용해야합니다.은 현재 클릭 된 요소의 활성화 코드가있는 else 문안 안에 있습니다.

수정 된 코드는 코드의 의견을 살펴 보시기 바랍니다 :이 문제가 발생했다

;(function ($, window, undefined){ 'use strict'; 

    $.fn.foundationAccordion = function (options) { 
    var $accordion = $('.accordion'); 

    if ($accordion.hasClass('hover') && !Modernizr.touch) { 
     $('.accordion li', this).on({ 
     mouseenter : function() { 
      var p = $(this).parent(), 
      flyout = $(this).children('.content').first(); 
      $('.content', p).not(flyout).hide().parent('li').removeClass('active'); 
      flyout.show(0, function() { 
      flyout.parent('li').addClass('active'); 
      }); 
     } 
     }); 
    } else { 
     //be sure to add the param event in the click function handler 
     $('.accordion li', this).on('click.fndtn', function (event) { 
     var li = $(this), 
      p = $(this).parent(), 
      flyout = $(this).children('.content').first(); 

     if (li.hasClass('active')) { 
      p.find('li').removeClass('active').end().find('.content').hide(); 
     } else { 
      //stop event propagation   
     event.stopPropagation(); 
      $('.content', p).not(flyout).hide().parent('li').removeClass('active'); 
      flyout.show(0, function() { 
      flyout.parent('li').addClass('active'); 
      }); 
     } 
     }); 
    } 

    }; 

})(jQuery, this); 

Answer 2

. 아코디언은 효과가 있었지만, 화살표 표시기와 스타일은 각 어린이 아코디언이 열린 것처럼 보였다.

ul.accordion > li.active > .title { background: white; padding-top: 13px; } 
ul.accordion > li.active > .title:after { content: ""; display: block; width: 0; height: 0; border: solid 6px; border-color: #9d9d9d transparent transparent transparent; } 

새로운 아이의 선택은 .title을 li.active사이 : 이것은 당신이 라인 (715) 및 foundation.css의 716에 추가로 아이 선택기를 추가하여 해결할 수있는 CSS "버그"입니다 .