4

これは非常に単純な状況ですが、解決策が議論されたり質問されたりしていないことに驚いています。

パネルにメニューがある任意のAccordionでは、ヘッダー自体が (メニューの) 唯一のオプションであるため、コンテンツ パネルを表示してはならない場合があります。ヘッダー自体がクリック イベントを処理し、コンテンツ パネルを展開せずに何かを行います。

だから、私は次のことを試しました：

a. およびイベント ハンドラーdivを含むさまざまな場所で、静的および動的にCSS でコンテンツ パネルの高さをゼロに設定するすべての可能な方法。activatebeforeactivate

b. ui-state-disabledcreate イベント ハンドラーのヘッダーにクラスを追加しました。正常に動作しますが、2 つの小さな問題があります。まず、無効化されたヘッダーは別の CSS を取得し、次にヘッダーをクリックすると、他のパネルは折りたたまれません。これは、ヘッダーを無効化すると、クリック イベントがそれ以上伝播されなくなり、現在開いているコンテンツ パネルを折りたたむ作業が行われなくなるためです。明示的に呼び出すことができる折りたたみメソッドはありません。

c. jquery accordion の特定のリンクを無効にする方法の解決策を試しました。動作しません。

誰かが新しいアプローチを提案できますか? 別の言い方をすると、問題はアコーディオン駆動のメニューを実装することです。複数のオプションがある場合、メニュー ウィジェットはパネルに埋め込まれます。単一の場合、アコーディオン自体のヘッダーがクリック可能なメニュー項目/オプションになります。

4

2 に答える 2

3

event.toElementinbeforeActivate関数を使用できます。h3最初にタグに id を設定します。

<h3 id="3">Section 3</h3>

event.toElementid が であるかどうかを確認し3ます。もしそうなら、実行するevent.preventDefault()

$("#accordion").accordion({
    beforeActivate: function (event, ui) {
        if($(event.toElement).attr('id') == 3)        
            event.preventDefault();
    }
});

デモ：JsFiddle

ヘッダーのみのアコーディオンが選択されているときにアクティブなアコーディオンを折りたたむように編集するには、以下のコードを使用します

if($(event.toElement).attr('id') == 3){
    event.preventDefault();
    $("#accordion").accordion( "option", "active", false );
}

修正されたデモ:JsFiddle

アイコンの修正を編集します。少し面倒ですが、動作します

beforeActivate: function (event, ui) {
    var $span = $('#accordion h3#3 span').first();
    if ($(event.toElement).attr('id') == 3) {
        event.preventDefault();
        if ($span.hasClass('ui-icon-minus')) {
            $span.removeClass('ui-icon-minus');
            $span.addClass('ui-icon-plus');
        } else {
            $span.removeClass('ui-icon-plus');
            $span.addClass('ui-icon-minus');
        }
        $("#accordion").accordion("option", "active", false);
    } else if (event.toElement) {
        if ($span.hasClass('ui-icon-minus')) {
            $span.removeClass('ui-icon-minus');
            $span.addClass('ui-icon-plus');
        }
    }
}

修正されたデモ:JsFiddle

于 2013-11-03T05:15:15.240 に答える
0

実際、これはコメントであり、私の答えではありません。しかし、コメントセクションでそれを絞り込むことができず、このフォーラムは初めてです。ソリューションを投稿したかっただけです。@th1rdey3 によって提供された指示に完全に基づいているため、最初に彼のソリューションを確認してから、ここで編集する必要があります。コンセプトは、ヘッダーに展開可能なコンテンツがない場合は、最初にアイコンを削除する必要があるというものです。これにより、ソリューションが簡素化され、UI が論理的になります。CSS が hdr の背景色をそれに応じて変更するため、アクティブ状態が追加されます。

 $( "#accordion" ).accordion({collapsible: true, active:false, heightStyle:"content",
     icons: {
             "header": "ui-icon-plus",
             "activeHeader": "ui-icon-minus"
     }, 
     collapsible: true,
     create: function (event, ui) {
        $('#accordion h3#3 span').remove();
     },
     beforeActivate: function (event, ui) {
         $('#3').removeClass("ui-state-active"); //Can be removed conditionally too
         if ($(event.toElement).attr('id') == 3) {
                    event.preventDefault();
         $("#accordion").accordion("option", "active", false);
       } 
     }
 });
$('#3').click(function() {  $(this).addClass("ui-state-active"); /* do stuff here on click */ });
于 2013-11-03T18:10:09.250 に答える