2

こんにちはみんな私はqueryUIセクションを無効にしようとしています、私は2つのセクションしかありません、これまでのところ私は私のハックのいくつかを試しましたが、どれもうまくいかないようです、

ここで私がこれまでに試したことは、

        //Enable section1 by remove attributes
        $('#subfacEdit').removeAttr("disabled");//div
        $('#subfacEdit').removeAttr("display");//div
        $('#HeadersubfacEdit').removeAttr("disabled");//H3
        $('#HeadersubfacEdit').removeAttr("display");//H3

        //Disable section2
        $('#facEdit').attr("disabled", "disabled");//div
        $('#facEdit').attr("display", "none");//div
        $('#HeaderfacEdit').attr("disabled", "disabled");//H3
        $('#HeaderfacEdit').attr("display", "none");//H3

        $('#editAccdordian').accordion("activate", 1);//activate section2

分析： Divは無効になりますが、表示属性は適用されていないと思います。どうしてもセクションをクリックできないようにするだけです。

私は少しの変更でMasterMindsソリューションを試しましたか？
http://jsfiddle.net/X8MFf/15/

4

2 に答える 2

3

data-無効にしたい属性に特別な属性を追加することができますdata-enabled="false"。次に、beforeActivateイベントを使用して、切り替えを防止します。の線に沿った何か

$( "#EditAccdordian" ).on( "accordionbeforeactivate", function( event, ui ) {
  if( ui.newHeader && ui.newHeader.attr('data-enabled') == 'false') {
    event.preventDefault();
  }
} );

アコーディオン作成でイベントをバインドすることもできます。

$( "#EditAccdordian" ).accordion({
  beforeActivate: function( event, ui ) {
    if( ui.newHeader && ui.newHeader.attr('data-enabled') == 'false') {
      event.preventDefault();
    }
  }
});

無効にしたヘッダーは次のようになります。

<h3 id="HeaderfacEdit" data-enabled="false">Header content</h3>

編集： それはjqueryオブジェクトであるため、ui.newHeaderのjquery選択を削除しました。オブジェクトの検証は、折りたたみ時に空であるため実行する必要があります（ドキュメントを参照）。

于 2012-12-03T12:31:30.887 に答える
2

これを試してみてください...

$(".DISABLE").click(function(){
      $(this).next().hide();
      $("#accordion").accordion({active:current});
  });

完全な例

...
//JAVASCRIPT
$(document).ready(function() {
  var $accordion = $("#accordion").accordion({ collapsible: true });
  $( "#accordion" ).accordion( "option", "clearStyle", true );

  var current=null;

  $("#accordion h3:not(.DISABLE)").click(function(){
    current = $accordion.accordion("option","active");       
  });

  $(".DISABLE").click(function(){
      $(this).next().hide();
      $("#accordion").accordion({active:current});
  });
});
...  
  //HTML
  <div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>
        MUK - 1
    </div>
    <h3 **class="DISABLE"**><a href="#">Section 2 (Disabled)</a></h3>
    <div>
        MUK - 2
    </div>
    <h3><a href="#">Section 3</a></h3>
    <div>
        MUK - 3
    </div>
    <h3><a href="#">Section 4</a></h3>
    <div>
        MUK - 4
    </div>
</div>
于 2012-12-05T06:34:00.743 に答える