Zurb Foundation 中的 JQuery Accordion 问题

Question

我正在使用最新版本的 Zurb 的 Foundation 原型设计框架。尽管对上下文有所帮助，但您对这个特定产品有任何经验并不是完全必要的。

框架中包含的工具之一是 JQuery 手风琴 - 但是他们已经进行了一些自定义样式修改。这似乎造成的问题之一是，每当您在内容窗格中单击 ANYWHERE 时，该窗格就会折叠。我有一个基于 JQuery 的表单元素，我需要能够在这个手风琴中使用它。问题是，当您单击文本框或手风琴中的任何其他位置时，它会折叠面板。与 JQuery 的标准 UI 手风琴的另一个区别是所有面板可以一次折叠，我不想要或不需要这个。事实上，如果不是 Zurb 手风琴的样式，我只会下载 JQuery 的手风琴并使用它。然而，这不是一个选择，在尝试解决问题几个小时后，我意识到是时候咨询专家了。任何建议将不胜感激。另外，我知道周围有几个与此类似的问题，但是没有一个解决这个特定问题，而且我的专长是 PHP，而不是 Jquery。如果可以的话，请看看并伸出援手！提前谢谢你。

Zurb 基金会：http://foundation.zurb.com/ Zurb 基金会手风琴用户界面：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 );

Answer 1

Alex Soto 的想法是对的，但也有一些错别字。如果您使用的是 Foundation 默认类名“content”，那么下面的剪切和粘贴代码应该可以工作。

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

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

Answer 2

我通过在手风琴内的元素上放置一个事件处理程序来解决这个问题，然后对事件调用 stopPropagation() 以防止它冒泡到手风琴点击处理程序绑定到的元素。

例子：

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

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

因此，在上面的示例中，您应该将表单包装在 div.my_class 元素中，以便在元素外部单击时，会发生常规手风琴折叠行为，但在您的表单内，点击事件不会折叠手风琴。