在頁面加載後打開jQuery UI手風琴的所有部分

您好，我希望在加載頁面後打開jQuery Ui的手風琴。爲此，我在這個網站上找到了下面的代碼。在頁面加載後打開jQuery UI手風琴的所有部分

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="icon" type="../image/logo.png" href="image/logo.png" /> 
     <title>Survey</title> 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
     <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
     <script type="text/javascript"> 
      $(function() { 
       $('#accordion').accordion({ 
         collapsible:true, 
         heightStyle: 'content', 
         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; // Cancel the default action 
         } 
        }); 
        $("#accordion> div").accordion({ 
         header: "h3", 
         autoHeight: false, 
         collapsible: true, 
         icons: icons 
        }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="accordion"> 
      <h3>First header</h3> 
      <div>First content panel</div> 
      <h3>Second header</h3> 
      <div>Second content panel</div> 
     </div> 
    </body>

我的困難就是如何我可以繼續對後頁面加載，即使所有的事情都是正確的所有手風琴打開。謝謝！

來源

2016-11-07 SANDWIDI

你是什麼意思「所有的事情都是對的」？哪些事？ –

只要說我發現在這個網站http://jsfiddle.net/soboaz/3gHrv/正確運行，但我想要的是加載頁面後打開所有jQuery ui的手風琴。在那個例子中，我只有一個被打開。我希望清楚。謝謝你的回覆。 – SANDWIDI

只需在**你的'$（'＃accordion'）手風琴後面添加這一行**手風琴（{'function - '$（「。ui-accordion-content」）。show小提琴在這裏]（http://jsfiddle.net/3gHrv/926/） –

就顯示出手風琴的內容，就像這樣：

$(function() { 
 
    $('#accordion').accordion({ 
 
    collapsible:true, 
 
    heightStyle: 'content', 
 
    create: function(event, ui) { 
 
     $('#accordion .ui-accordion-content').show(); 
 
    } 
 
    }); 
 
});

<!doctype html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <link rel="icon" type="../image/logo.png" href="image/logo.png" /> 
 
     <title>Survey</title> 
 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
     <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
     <script type="text/javascript"> 
 
      
 
     </script> 
 
    </head> 
 
    <body> 
 
     <div id="accordion"> 
 
      <h3>First header</h3> 
 
      <div>First content panel</div> 
 
      <h3>Second header</h3> 
 
      <div>Second content panel</div> 
 
     </div> 
 
    </body>

來源

2016-11-07 11:44:42

非常感謝你的解決方案，它是正確的！ – SANDWIDI

在頁面加載後打開jQuery UI手風琴的所有部分

回答

相關問題