折叠全部，仍然有第一个手风琴默认打开

我正在尝试与jquery手风琴合作。我使用的jsfiddle这是这样一个问题：jQuery UI Accordion Expand/Collapse All 折叠全部，仍然有第一个手风琴默认打开

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Kaneka Extranet CustomerDocs</title> 
    <link href="/Content/screen.css" rel="stylesheet"/> 
<link href="/Content/fonts.css" rel="stylesheet"/> 

    <script src="/Scripts/modernizr-2.6.2.js"></script> 

    <script src="/Scripts/jquery-1.10.2.js"></script> 
<script src="/Scripts/jquery-1.8.2.js"></script> 

    <script src="/Scripts/jquery-ui-1.10.4.js"></script> 

    <script type="text/javascript" src="http://use.typekit.com/omm2ava.js"></script> 
    <script type="text/javascript"> try { Typekit.load(); } catch (e) { }</script> 

</head> 
<body class="page"> 
    <script src="/Scripts/jquery-1.10.2.js"></script> 
<script src="/Scripts/jquery-1.8.2.js"></script> 

    <script src="/Scripts/bootstrap.js"></script> 
<script src="/Scripts/respond.js"></script> 



    <script src="/Scripts/jquery.validate.js"></script> 
<script src="/Scripts/jquery.validate.unobtrusive.js"></script> 

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

    <script type="text/javascript"> 
     $(function() { 
       $(".accordion").accordion({ 
        collapsible: true, 
        heightStyle: "content", 
        active: false 
       }); 
       var icons = $(".accordion").accordion("option", "icons"); 
       $('.open').click(function() { 
        $('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({ 
         'aria-selected': 'true', 
         'tabindex': '0' 
        }); 
        $('.ui-accordion-header-icon').removeClass(icons.header).addClass(icons.headerSelected); 
        $('.ui-accordion-content').addClass('ui-accordion-content-active').attr({ 
         'aria-expanded': 'true', 
         'aria-hidden': 'false' 
        }).show(); 
        $(this).attr("disabled", "disabled"); 
        $('.close').removeAttr("disabled"); 
       }); 
       $('.close').click(function() { 
        $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({ 
         'aria-selected': 'false', 
         'tabindex': '-1' 
        }); 
        $('.ui-accordion-header-icon').removeClass(icons.headerSelected).addClass(icons.header); 
        $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({ 
         'aria-expanded': 'false', 
         'aria-hidden': 'true' 
        }).hide(); 
        $(this).attr("disabled", "disabled"); 
        $('.open').removeAttr("disabled"); 
       }); 
       $('.ui-accordion-header').click(function() { 
        $('.open').removeAttr("disabled"); 
        $('.close').removeAttr("disabled"); 
       }); 
       $('h1:eq(0)').trigger('click'); 
       $('h2:eq(0)').trigger('click'); 
      }); 

    </script> 

    <style type="text/css"> 
     .accordion-expand-holder { 
      margin: 10px 0; 
     } 

     .accordion-expand-holder .open, .accordion-expand-holder .close { 
      margin: 0 10px 0 0; 
     } 

    </style> 



    <div class="bgborder-top"></div> 
    <div id="container"> 
     <div id="header"> 
      <a id="kanekalogo" href="/"><img src="/images/logo_kaneka.png" alt="" /></a> 
      <div id="topnav"></div> 
      <div id="top"> 
       <div id="breadcrumbs"> 


     <a href="/" title="Home">Home</a> 
     &gt; 

    Documents 

       </div> 
      </div> 
     </div> 
     <div id="leftcontainer"> 
      <a id="clientlogin" href="/Account/Login">Client Login</a> 
     </div> 
     <div id="content"> 



<h1>Documents Overview</h1> 

Welcome [email protected]<br /> 

<div class="accordion-expand-holder"> 
    <div class="form-row"> 
     <table> 
      <tr> 
       <td> 
<form action="/Documents" method="post">      <p> 
          <label for="SearchCriteria">Search</label> 
          <input id="SearchCriteria" name="SearchCriteria" type="text" value="" /> 

          <input type="image" width="25" src="/Images/search-icon.png" alt="Search documents" title="Search Documents"> 

         </p> 
</form>    </td> 
       <td> 
        <input type="image" width="25" src="/Images/expandAll.png" alt="Expand All" title="Expand All" class="open"> 
       </td> 
       <td> 
        <input type="image" width="25" src="/Images/collapseAll.png" alt="Collapse All" title="Collapse All" class="close"> 
       </td> 
      </tr> 
     </table> 
    </div> 
</div> 



<div class="accordion"> 
    <h1>High Performance Polymers</h1> 
    <div> 
     <div class="accordion"> 
      <h1>Safety Data Sheet</h1> 
      <div> 
       Here comes text. 
      </div> 
     </div> 
     <div class="accordion"> 
      <h1>Technical Data Sheet</h1> 
      <div> 
       Here comes somes other text 
      </div> 
     </div> 
    </div> 
</div> 
<div class="accordion"> 
    <h1>Eperan</h1> 
    <div> 
     <div class="accordion"> 
      <h1>Safety Data Sheet</h1> 
      <div> 
       Here comes some ohter text 
      </div> 
     </div> 
     <div class="accordion"> 
      <h1>Technical Data Sheet</h1> 
      <div> 
       Some other text. 
      </div> 
     </div> 
    </div> 
</div> 



     </div> 
     <div class="push"></div> 
    </div> 
    <div id="footer" class="bgborder-bottom"> 
     <div id="footer-container"></div> 
    </div> 

<!-- Visual Studio Browser Link --> 
<script type="application/json" id="__browserLink_initializationData"> 
    {"appName":"InternetExplorer","requestId":"09c25ea2edd34132bcec5a536592ad9c"} 
</script> 
<script type="text/javascript" src="http://localhost:6824/5b10ce23a3a348e29f74f46dd49ecc51/browserLink" async="async"></script> 
<!-- End Browser Link --> 

</body> 
</html>

https://jsfiddle.net/bschelkens/5w3Lb9pv/14/

以上是我寺页面的样子。由于某种原因，当我尝试我的小提琴时，它做我期待的。但在我的代码这不起作用。

来源

2015-05-28 Bart Schelkens

是什么，现在发生的呢？在jsfiddle中，第一手风琴最初被扩展。 – kwangsa

对不起，我没有注意到有2个小提琴。我添加了我正在谈论的问题的小提琴。 –

@BartSchelkens删除'active：false'它会默认打开第一个选项 –

删除active:false它默认打开第一个选项。

看到DEMO

$("#accordion").accordion({ 
    collapsible:true, 
});

与active:false秒选项。触发代码结尾的点击事件。

 $('h3:eq(0)').trigger('click');

看到DEMO

来源

2015-05-28 07:26:01

折叠全部，仍然有第一个手风琴默认打开

回答

相关问题