Zurb基金會手風琴內嵌手風琴套

我使用Zurb Foundation作爲響應式網站。我想獲得嵌套使用以下HTML結構的手風琴內部的手風琴：Zurb基金會手風琴內嵌手風琴套

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

貌似這種設置，當父手風琴面板打開，隨後孩子手風琴板被打開（或至少某些標誌被設置爲打開，因爲箭頭向下指向開放父項），並且兒童手風琴功能中斷。我可能會在Foundation父手風琴內部添加一個jQuery UI手風琴，但它不會像父母一樣響應，因此可能會首先破壞使用Foundation的目的。

有沒有人成功完成了這個？

來源

2012-12-06 lauharkness

這可能無法完成對jQuery插件的劇烈修改。我看着jQuery代碼，它看起來不像它支持這種行爲。 –

我剛剛查看了插件源，看看有什麼選項進行基本修改，並且沒有選項。我只是推出自己的，並使用他們的風格。我同意，這需要對插件進行相當大的修改。 –

您只需停止手風琴項目上的單擊事件編程，然後，如果您單擊兒童手風琴項目，則小孩點擊事件將不會關閉父項目。

修改很簡單，您必須在點擊處理程序中添加參數事件，並使用event.stopPropagation（）;內部的其他狀態與當前點擊元素的激活碼。

修改後的代碼，請拿上代碼註釋一看：

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

來源

2012-12-20 13:16:39

我是有這個問題。手風琴會奏效，但箭頭指示器和造型彷彿每個手風琴都是開放式的。這是一個CSS「錯誤」，你可以通過添加額外的子選擇器線715和foundation.css 716修復：

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

新的子選擇器是li.active和.title僞之間。

來源

2013-03-06 17:19:30

Zurb基金會手風琴內嵌手風琴套

回答

相關問題