0

私はjQueryアコーディオンの代替案を作成しました。これは、複数のオープンセクションのサポートを提供していなかったためです（なぜ彼らがそのサポートを含まないことを選択したのか、その歴史は何ですか？）。StackOverflowとGoogleで調査を行い、他にどのようなオプションが考えられるかを確認しました。複数の要素でその場で使用できるものが必要でした。

いくつかの解決策を見て実験した後、最終的に、私は自分のバージョンを作成しました（http://forum.jquery.com/topic/accordion-multiple-sections-open-at-onceからのKevinの解決策に基づいていますが、かなり変更）。

jsFiddleはここで見つけることができます：http：//jsfiddle.net/3jacu/1/

インラインコード：

$(document).ready(function(){

$.fn.togglepanels = function(){
    return this.each(function(){
        h4handler = $(this).find("h4");
        $(h4handler).prepend('<div class="accordionarrow">&#9660;</div>');
        $(h4handler).click(function() {
            $(h4handler).toggle(
                function() {
                    barclicked = $(this);
                    $(barclicked).find(".accordionarrow").html('&#9658;');
                    $(barclicked).next().slideUp('slow');
                    window.console && console.log('Closed.');
                    return false;
                }, 
                function() {
                    barclicked = $(this);
                    $(barclicked).find(".accordionarrow").html('&#9660;');
                    $(barclicked).next().slideDown('slow');
                    window.console && console.log('Open.');
                    return false;
                }
            );
        });
    });
};

$("#grouplist").togglepanels(); }

奇妙なことに、右側のアコーディオン矢印は、ローカルコピーでは機能しているのに、jsFiddleに貼り付けると機能しなくなりました。

いずれにせよ、問題はトグルが期待どおりに機能していないことです。トグルが機能すると、重複したトグルイベントが発生し、その結果、セクションが閉じて開き、最終的に閉じて、その時点から開きません（開いてから閉じます）。それが機能することを前提としています！最初は応答しないので動作しません。どこかに論理エラーがあると思います。

私がコードで書いた/見たものから、指定されたハンドルで対応するタグ（この場合はh4）を検索し、ハンドルを変数にポップします。次に、アコーディオン矢印クラス（右にフロート）を適用しながら、h4タグに矢印を追加します。次に、クリックイベントを追加します。これにより、h4がクリックされると、2つの関数が切り替わります（jQueryのトグル関数を使用）。

ここでの問題は、jQueryのトグル関数が2つの関数を切り替えるために正常に機能すると誤って想定している可能性があることであり、独自のトグルコードを実装する必要があると思われます。私が間違っているなら私を訂正してください！

できるだけ効率的になるようにコードを書こうとしているので、それについてのフィードバックもいただければ幸いです。

お手数ですが、よろしくお願いいたします。

4

3 に答える 3

3

バインディング内にtoggleバインディング（ちなみに非推奨）があるclickため、ヘッダーをクリックするたびに新しいイベントハンドラーがアタッチされます。

ランダムに脇に置いて、外部コードが状態の変化に反応できるように、プラグイン内でイベントを発生させる必要があります（コンソール行がある場合は意味があります）。

于 2012-11-18T03:33:38.300 に答える
1

);jQuery関数への関数呼び出しを閉じるために末尾の文字を貼り付けるのを忘れましたready。修正： http： //jsfiddle.net/LeZuse/3jacu/2/
更新：私はあなたの質問に本当に答えなかったことに気づきました。
別の.clickハンドラーをバインドして.toggle機能を複製しています。.toggle
に関するドキュメントには次のように書かれています。

説明：2つ以上のハンドラーを一致した要素にバインドして、交互のクリックで実行します。

これは、クリックイベントがすでに組み込まれていることを意味します。
注：プラグインがウィンドウオブジェクトを汚染しないように、グローバルではなくローカル変数を使用する必要があります。varこのためのキーワードを使用してください：
var h4handler = $(this).find("h4");

于 2012-11-18T03:31:09.683 に答える
1

あなたの問題はあなたがリスナー$(h4handler).click(function() {を包み込んだことだと思います。toggle基本的にこれが行っていたのは、タブをクリックするたびにトグルリスナーが追加され、それがイベントを発生させることでした。クリックリスナーを削除すると、期待どおりの動作になります。

于 2012-11-18T03:35:15.660 に答える