Zurb基金會的JQuery手風琴問題

我正在使用最新版本的Zurb基金會原型框架。儘管它對上下文有幫助，但對於此特定產品有任何經驗並非完全必要。Zurb基金會的JQuery手風琴問題

框架中包含的工具之一是JQuery手風琴 - 但他們已經做了一些自定義樣式修改。似乎創建的一個問題是，無論何時單擊內容窗格中的任何地方，該窗格都會崩潰。我有一個基於JQuery的表單元素，我需要在這個手風琴裏面使用。問題在於，第二次點擊文本框或手風琴中的其他任何地方都會摺疊面板。 JQuery標準UI手風琴的另一個不同之處在於，所有面板可以一次摺疊，我不需要或者不需要它。事實上，如果不是Zurb手風琴的風格，我只會下載JQuery的手風琴並使用它。然而，這不是一種選擇，經過幾個小時的努力解決問題，我意識到是時候諮詢專家了。任何建議將不勝感激。另外，我知道有幾個類似於這個問題的問題，但是沒有解決這個問題，我的專長是PHP，而不是Jquery。請看看，如果可以的話，伸出援手！先謝謝你。

Zurb基礎：http://foundation.zurb.com/ Zurb基礎手風琴UI：http://foundation.zurb.com/docs/elements.php（向下滾動到手風琴）

實際jQuery腳本手風琴：

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

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

    if ($accordion.hasClass('click') && !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'); //changed this 
      flyout.show(0, function() { 
      flyout.parent('li').addClass('active'); 
      }); 
     } 
     }); 
    } else { 
     $('.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('.content').hide(); 
     } else { 
      $('.content', p).not(flyout).hide().parent('li').removeClass('active'); //changed this 
      flyout.show(0, function() { 
      flyout.parent('li').addClass('active'); 
      }); 
     } 
     }); 
    } 

    }; 

})(jQuery, this);

來源

2012-12-23 MS-DDOS

我通過把事件處理程序裏面的元素解決了這個手風琴，然後在事件上調用stopPropagation（）以防止它冒泡到手風琴點擊處理程序綁定的元素。

例子：

function handle_click(event) { 
    event.stopPropagation(); 
    // your event code 
} 

$('ul.accordion').('click', 'li div.my_class', handle_click);

所以在上面的例子中，你應該換行div.my_class元素中的形式，使得點擊元素外，經常會出現崩手風琴的行爲，但你的表格，點擊裏面活動不會摺疊手風琴。

來源

2012-12-27 03:36:06

剛纔看到了這個！非常感謝你們回到我身邊。 –

亞歷克斯索托有正確的想法，但也有一些錯別字。如果您使用的是「內容」的基礎默認類名，則可以使用剪切和粘貼代碼。

function handle_click(event) { 
    event.stopPropagation(); 
} 

$('.accordion .content').on('click', handle_click);

來源

2013-01-10 04:59:41 Alec

Zurb基金會的JQuery手風琴問題

回答

相關問題