0

Zurb の Foundation プロトタイピング フレームワークの最新バージョンを使用しています。この特定の製品の使用経験が必ずしも必要というわけではありませんが、状況把握には役立ちます。

フレームワークに含まれるツールの 1 つに JQuery アコーディオンがありますが、いくつかのカスタム スタイル変更が加えられています。これにより発生したと思われる問題の 1 つは、コンテンツ ペイン内の任意の場所をクリックすると、そのペインが折りたたまれることです。このアコーディオン内で使用できるようにする必要がある JQuery ベースのフォーム要素があります。問題は、テキストボックスまたはアコーディオンの他の場所をクリックすると、パネルが折りたたまれることです。JQuery の標準 UI アコーディオンとのもう 1 つの違いは、すべてのパネルを一度に折りたたむことができることです。実際、Zurb のアコーディオンのスタイリングがなければ、JQuery のアコーディオンをダウンロードしてそれを使用するだけです。ただし、そうじゃない』これはオプションであり、問​​題を解決しようと数時間試みた後、専門家に相談する時が来たことに気付きました。どんな提案でも大歓迎です。また、これに似た質問がいくつか投稿されていることは知っていますが、この特定の問題に対処するものはなく、私の専門は Jquery ではなく PHP です。よろしければご覧いただき、お力を貸してください！前もって感謝します。

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

2 に答える 2

1

Alex Soto は正しい考えを持っていましたが、いくつかのタイプミスもありました。「コンテンツ」という Foundation のデフォルト クラス名を使用している場合に機能するはずのカット アンド ペースト コードを次に示します。

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

$('.accordion .content').on('click', handle_click);
于 2013-01-10T04:59:41.157 に答える
0

これを解決するには、アコーディオン内の要素にイベント ハンドラーを配置し、イベントで stopPropagation() を呼び出して、アコーディオン クリック ハンドラーがバインドされている要素にバブリングしないようにしました。

例：

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

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

したがって、上記の例では、要素の外側をクリックすると通常のアコーディオンの折りたたみ動作が発生するように、フォームを div.my_class 要素内にラップする必要がありますが、フォーム内ではクリック イベントによってアコーディオンが折りたたまれません。

于 2012-12-27T03:36:06.137 に答える