Javascript ZURB基金会的JQuery手风琴问题 我使用Zurb的基础原型框架的最新版本。虽然这有助于了解上下文，但您并不完全有必要拥有此特定产品的任何经验

框架中包括的工具之一是jQueryAccordion，不过他们已经做了一些自定义样式的修改。这似乎造成了一个问题，即无论何时单击内容窗格内的任何位置，该窗格都会崩溃。我有一个基于JQuery的表单元素，我需要能够在这个手风琴中使用它。问题是，当你第二次点击文本框，或者在手风琴的任何地方，它就会折叠面板。与JQuery的标准UI手风琴的另一个区别是，所有面板都可以一次折叠，我不希望也不需要这样做。事实上，如果不是因为Zurb的手风琴的风格，我只会下载JQuery的手风琴并使用它。然而，这不是一个选择，在尝试解决问题几个小时后，我意识到是时候咨询专家了。如有任何建议，将不胜感激。另外，我知道有几个问题与本文类似，但是没有一个能解决这个具体问题，我的专长是PHP，而不是Jquery。如果可以的话，请看一看并伸出援手！先谢谢你

Zurb基金会： Zurb基金会手风琴UI：（向下滚动到手风琴）

accordion的实际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 );

---

我通过在accordion中的元素上放置一个事件处理程序，然后对事件调用stopPropagation（），以防止它冒泡到accordion click处理程序绑定到的元素上，解决了这个问题

例如：

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

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

---

因此，在上面的示例中，您应该将表单包装在div.my_类元素中，这样在元素外部单击时，就会出现常规的手风琴折叠行为，但在表单内部，单击事件不会折叠手风琴。

Alex Soto的想法是正确的，但也有一些打字错误。下面是剪切和粘贴代码，如果使用“内容”的基础默认类名，则应该工作。

---

刚才看到了！非常感谢你们回复我。

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

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