亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使多個部分保持打開狀態的jQuery UI手風琴?

使多個部分保持打開狀態的jQuery UI手風琴?

暮色呼如 2019-11-13 16:04:27
我可能是個白癡,但是如何在jQuery UI的手風琴中打開多個部分呢?演示一次只能打開一個……我正在尋找一個可折疊的菜單類型系統。
查看完整描述

3 回答

?
慕森王

TA貢獻1777條經驗 獲得超3個贊

這原本是討論中的手風琴jQuery用戶界面文檔:


注意:如果要一次打開多個部分,請不要使用手風琴


手風琴不允許同時打開一個以上的內容面板,為此需要付出很多努力。如果您正在尋找一種可以打開多個內容面板的小部件,請不要使用它。通常,它可以用幾行jQuery代替,如下所示:


jQuery(document).ready(function(){

  $('.accordion .head').click(function() {

      $(this).next().toggle();

      return false;

  }).next().hide();

});

或動畫:


jQuery(document).ready(function(){

  $('.accordion .head').click(function() {

      $(this).next().toggle('slow');

      return false;

  }).next().hide();

});

“我可能是個白癡”-如果您不閱讀文檔,那么您不是白癡,但是如果遇到問題,通??梢约涌煺业浇鉀Q方案的速度。


查看完整回答
反對 回復 2019-11-13
?
汪汪一只貓

TA貢獻1898條經驗 獲得超8個贊

在類似的線程中發布此內容,但認為在這里也可能與此相關。


使用jQuery-UI手風琴的單個實例來實現


正如其他人指出的那樣,Accordion小部件沒有API選項可以直接執行此操作。但是,如果由于某種原因必須使用小部件(例如,您正在維護現有系統),則可以通過使用beforeActivate事件處理程序選項來顛覆和模擬小部件的默認行為來實現。


例如:


$('#accordion').accordion({

    collapsible:true,


    beforeActivate: function(event, ui) {

         // The accordion believes a panel is being opened

        if (ui.newHeader[0]) {

            var currHeader  = ui.newHeader;

            var currContent = currHeader.next('.ui-accordion-content');

         // The accordion believes a panel is being closed

        } else {

            var currHeader  = ui.oldHeader;

            var currContent = currHeader.next('.ui-accordion-content');

        }

         // Since we've changed the default behavior, this detects the actual status

        var isPanelSelected = currHeader.attr('aria-selected') == 'true';


         // Toggle the panel's header

        currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));


        // Toggle the panel's icon

        currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);


         // Toggle the panel's content

        currContent.toggleClass('accordion-content-active',!isPanelSelected)    

        if (isPanelSelected) { currContent.slideUp(); }  else { currContent.slideDown(); }


        return false; // Cancels the default action

    }

});


查看完整回答
反對 回復 2019-11-13
  • 3 回答
  • 0 關注
  • 580 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號