在页面加载后打开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手风琴的所有部分

回答

相关问题