11

私は次のマークアップを持っています：

<div id="accordion" class="leftaligned">
    <div>
        <h3><a href="#">Stakeholder</a></h3>
        <div>Content</div>
    </div>
    <div>
        <h3><a href="#">Relationships</a></h3>
        <div>Blah blah</div>
    </div>
    <div>
        <h3><a href="#">Address</a></h3>
        <div>Yada yada</div>
    </div>
    <div>
        <h3><a href="#">Contact Details</a></h3>
        <div>Foo bar</div>
    </div>
</div>

私は次のようにアコーディオンを作成します。

$("#accordion").accordion({
    header: "h3",
    fillSpace: true,
    changestart: function(event, ui) {
        if (someConditionIsTrue()) {
            event.stopPropagation();
            event.preventDefault();
            return (false);
        }
    }
});

ユーザーがペインを変更できないユースケースがいくつかあるという考え方ですが、上記のイベントのキャンセルは効果がなく、ペインは変更できます。

ペインの変更を防ぐ方法はありますか？また、変更を防ぐために現在のペインをプログラムでアクティブ化しようとしましたが、それによって別のchangestartイベントが発生し、すべての地獄が解き放たれます（アコーディオンが実際に壊れます）

4

10 に答える 10

10

$("#accordion .h3").unbind("click");

私のために働きます。

于 2010-08-02T23:41:14.950 に答える
7

アコーディオンを開始する前に、ロジックにカスタムクリックハンドラーを追加します。stopImmediatePropagationは、アコーディオンハンドラーが呼び出される前にイベントを停止します。

$('.quiz-qa h3').click(function(e) {      
  if ($(this).hasClass("deleted")) {
    e.stopImmediatePropagation();
    return false;      
   }   
});    
$('.quiz-qa').accordion();
于 2011-07-12T12:40:18.533 に答える
3

私はこれについて拡張リクエストを提出しました：チケット6651。

于 2010-11-15T15:51:14.467 に答える
1

私は自分のコンテキストで機能する回避策を見つけました-必要に応じて（IDを与えた後）h3ヘッダーを無効にするだけで、イベントを完全にキャンセルする必要がなくなります。

html：

<div>
    <h3 id="relationshipsHeader"><a href="#">Relationships</a></h3>
    <div>Blah blah</div>
</div>

脚本：

if (someConditionIsTrue()) {
    $("#relationshipsHeader").attr("disabled", "disabled");
    // and so on...
}
于 2010-01-05T09:45:06.490 に答える
1

質問が最初に行われてから数年が経ち、私はjQuery-UI 1.11.2を使用しているため、これは有効な回答ではなかった可能性があります。

しかし、これが私が最もよく機能することがわかったものです。

  1. まず、IDを無効にするヘッダーを指定するdisable_thisか、関連するヘッダーを選択できる他の方法を見つけます。

  2. 次に、このコード行を追加します

    $('h3#disable_this').addClass('ui-state-disabled');

以前の回答（unbind("click")およびe.stopImmediatePropogation()）で述べた方法のいくつかは、ヘッダーがクリックされたときにパネルが開かないという限られた意味で機能しました。しかし、私の方法には2つの追加の利点があります。

  • クリックすると、ヘッダーが強調表示されたスタイルになるのを停止します。

  • ヘッダーに無効なスタイルを与えます。

はるかにユーザーフレンドリー。

于 2015-02-19T17:44:53.520 に答える
1

古いjQueryUIで利用できるかもしれませんが、jQuery-UI 1.9.2以降を使用している場合は、beforeActivateイベントでのアコーディオンの折りたたみを無効にできます。

beforeActivate: function (event, ui) {
    event.preventDefault();
}
于 2016-10-20T18:03:36.020 に答える
0

ドラッグ可能なアコーディオンをチェーンしていたので、この動作の派生が必要でした。同じ解決策を探している人のために、ここに私の解決策を置いています。

私が避けようとしていた動作は、ヘッダーがアコーディオンとドラッグ可能の両方のハンドルである場合に、ドラッグ後にアコーディオンの変更をトリガーすることでした。したがって、ドラッグするたびに、現在展開されているコンテンツセクションが折りたたまれます。

HTML：

var $container = ('<div id="accordion">');
var $content = ('<div>');
$content.append(
    '<h1>Header 1</h1>' +
    '<div>Content 1</div>' +
    '<h1>Header 2</div>' +
    '<div>Content 2</div>'
);

JS：

$container.append($controls)
.draggable({
    handle: ':header',
    start: function(event, ui) {
        $(event.toElement).addClass('ui-dragging');
    }

});
$container.find(':header').click(function (event) {
    var $this = $(this);
    if ($(this).hasClass('ui-dragging')) {
        event.stopImmediatePropagation();
        $this.removeClass('ui-dragging');
    }
});
$container.accordion({
    collapsible: true,
    header: ':header'
});
于 2012-04-04T01:25:26.443 に答える
0

アコーディオンのコンテンツを動的に作成しているので、アコーディオンが生成される前にイベント呼び出しをバインドしても機能しません。そこで、アコーディオンが作成された後、stopImmediatePropagationをバインドしてみましたが、うまくいきました。

于 2013-03-25T06:05:19.413 に答える
0 
$("#accordion h3").unbind("click");

jsFiddle-アコーディオンを参照 してください

于 2013-08-13T16:10:14.540 に答える
-1

user438316による同様の回答がありますが、不要なコードが多すぎreturn falseて、耳障りなことは明らかです...どうでしょうか。

$('#accordion .deleted').click(function(e) {      
    e.stopImmediatePropagation();
});    
$('#accordion').accordion();
于 2012-02-20T11:57:28.693 に答える