Zurb基金会手风琴内嵌手风琴 [英] Zurb Foundation Accordion Nested Inside Accordion

问题描述

我将 Zurb基金会<​​/a>用于响应式网站。我希望使用以下HTML结构在手风琴中嵌入手风琴：

 < ul class =accordion > 
< li class =active> 
< div class =title>第一个Accordion Panel Title< / div> 
< div class =content>第一个Accordion Panel Content< / div> 
< / li> 
< li> 
< div class =title>第二个Accordion Panel Title< / div> 
< div class =content>第二个Accordion Panel Content< / div> 
< / li> 
< li> 
< div class =title>父Accordion Panel Title< / div> 
< div class =content> 
 
< ul class =accordion> 
< li class =active> 
< div class =title> Child Accordion Panel Title< / div> 
< div class =content>儿童手风琴面板内容< / div> 
< / li> 
 ... 
< / ul> 
 
< / div> 
< / li> 
< / ul> 
  

看起来像这样的设置，当父手风琴面板打开时，随后的儿童手风琴面板被打开（或者至少某个标志被设置为打开，因为箭头向下指向开放父母那样），并且儿童手风琴功能中断。我可能会在Foundation parent手风琴内添加一个jQuery UI手风琴，但它不会像父母那样响应，因此可能会首先破坏使用Foundation的目的。

有没有人成功地完成了这项工作？

解决方案

您只需停止手风琴项目上的点击事件编辑，如果您点击儿童手风琴项目，则小孩点击事件将不会关闭父项目。

修改很简单，您必须添加param事件在点击处理程序中，使用当前点击元素的激活码在else状态中使用 event.stopPropagation（）; 。

 ;（function（$，window，undefined） ）{'use strict'; 
 
 $ .fn.foundationAccordion = function（options）{
 var $ accordion = $（'。accordion ）; 
 
如果（$ accordion.hasClass（悬停）及;&安培; ！（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 {
 //确保在点击函数处理函数中添加param事件
 $（'。accordion li'，this）.on（'click.fndtn'，function（事件）{
 var li = $（this），
p = $（this）.parent（），
 flyout = $（this）.children（'。content'）。first ）; 
 
 if（li.hasClass（'active'））{
 p.find（'li'）。removeClass（'active'）。end（）。find（'。内容'）。hide（）; 
} else {
 //停止事件传播
 event.stopPropagation（）; 
 $（'。content'，p）.not （'li'）。removeClass（'active'）; 
 flyout.show（0，function（）{
 flyout.parent（'li'）。addClass（' 'active'）; 
}）; 
} 
}）; 
} 
 
}; 
 
}）（jQuery，this）; 
  

I'm using Zurb Foundation for a responsive website. I'd like to get an accordion nested inside an accordion using the following HTML structure:

<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>

Looks like with this setup, when the parent accordion panel is opened, the subsequent children accordion panels are opened (or at least some flag is set to open because the arrows are pointing down like the open parent) and the child accordion functionality breaks. I could probably add a jQuery UI accordion inside the Foundation parent accordion, but it wouldn't be responsive like the parent and thus might defeat the purpose of using Foundation in the first place.

Has anyone successfully accomplished this?

解决方案

You just have to stop the click event progation over the accordion items, then, if you click in a child accordion item, child click event won't close the parent item.

The modification is easy, you have to add the param event in the click handler, and use event.stopPropagation(); inside the else statament with the activation code of the current clicked element.

the modified code, please, take a look on the code comments:

;(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 );

这篇关于Zurb基金会手风琴内嵌手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！