2013-06-05 119 views
3

我使用該基金會3手風琴不倒閉不活動的部分:http://foundation.zurb.com/old-docs/f3/elements.php#accordionZurb基金會手風琴 -

的默認行爲是,當你點擊一個選項卡來擴展部分,先前擴張部分坍塌。我想覆蓋它,以便在第一部分展開的情況下加載頁面,然後當您展開其他細分時,它們都保持打開狀態。基本上,我想完全禁用摺疊細分。

下面是相關的js。我試着只是「removeClass(‘無效’)替換所有的「removeClass(‘激活’)」的地方,但它似乎沒有做任何事情。

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

    $.fn.foundationAccordion = function (options) { 

// DRY up the logic used to determine if the event logic should execute. 
var hasHover = function(accordion) { 
    return accordion.hasClass('hover') && !Modernizr.touch 
}; 

$(document).on('mouseenter', '.accordion li', function() { 
    var p = $(this).parent(); 

    if (hasHover(p)) { 
     var flyout = $(this).children('.content').first(); 

     $('.content', p).not(flyout).hide().parent('li').removeClass('active'); 
     flyout.show(0, function() { 
     flyout.parent('li').addClass('active'); 
     }); 
    } 
    } 
); 

$(document).on('click.fndtn', '.accordion li .title', function() { 
    var li = $(this).closest('li'), 
     p = li.parent(); 

    if(!hasHover(p)) { 
     var flyout = li.children('.content').first(); 

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

     }; 

    })(jQuery, this); 

回答

1

註釋掉click偵聽器內的線是從li元素刪除active類如果您改變了主意,並希望允許部分通過再次單擊關閉,只註釋掉第二個見下圖:。

$(document).on('click.fndtn', '.accordion li .title', function() { 
    var li = $(this).closest('li'), 
     p = li.parent(); 

    if(!hasHover(p)) { 
     var flyout = li.children('.content').first(); 

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

對於那些誰不閱讀像我這樣的文檔,Foundation 5包含此選項:http://foundation.zurb.com/docs/components/accordion.html並滾動到「Optional Ja vascript配置「。

在foundation.accordion.js中的設置對象中,將默認的」false「將multi_expand更改爲」true「,您將可以輕鬆前往。

settings : { 
    active_class: 'active', 
    //multi_expand: false, 
    multi_expand: true, 
    toggleable: true, 
    callback : function() {} 
},