Question

我尝试用我的代码制作wordpress小部件设计：我的取消按钮无法正常工作？

这是我的完整代码：

<!DOCTYPE html>
    <html lang="en"><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <meta charset="utf-8">
      <title>jQuery UI Accordion - Collapse content</title>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
      <script>
      $(function() {
        $( "#accordion" ).accordion({
          collapsible: true,
          active: false
        });
      });

      $(function() {
        $( "#aas" ).accordion({
           disabled: true
        });
      });
      </script>
    </head>
    <body>
    <table width="100%" border="1">
      <tr>
        <td width="34%"><h2>AAAA</h2>
        <p><div role="tablist" class="ui-accordion ui-widget ui-helper-reset" id="accordion">
      <h3 tabindex="0" aria-expanded="false" aria-selected="false" aria-controls="ui-id-2" id="ui-id-1" role="tab" class="ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>Section 1</h3>
      <div aria-hidden="true" role="tabpanel" aria-labelledby="ui-id-1" id="ui-id-2" style="display: none; height: 189.8px;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">

       <form action="" method="post">

    <input type="radio" name="AAAA" value="AAAA_left" checked>
    AAAA Left &nbsp;

    <input type="radio" name="AAAA" value="AAAA_right">
    AAAA Right<br>
    <br>
    <input name="submit8" type="submit" value="Add Widget"> &nbsp;&nbsp; <input name="submit9" id="aas" class="accordion" type="submit" value="Cancel">        
       </form>
      </div>
      <h3 tabindex="-1" aria-expanded="false" aria-selected="false" aria-controls="ui-id-4" id="ui-id-3" role="tab" class="ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>Section 2</h3>
      <div aria-hidden="true" role="tabpanel" aria-labelledby="ui-id-3" id="ui-id-4" style="display: none; height: 189.8px;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
        <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit 
    amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis 
    porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non 
    quam. In suscipit faucibus urna. </p>
      </div>
      <h3 tabindex="-1" aria-expanded="false" aria-selected="false" aria-controls="ui-id-6" id="ui-id-5" role="tab" class="ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>Section 3</h3>
      <div aria-hidden="true" role="tabpanel" aria-labelledby="ui-id-5" id="ui-id-6" style="display: none; height: 189.8px;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
        <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque
     lobortis. Phasellus pellentesque purus in massa. Aenean in pede. 
    Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed 
    commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis 
    leo purus venenatis dui. </p>
        <ul>
          <li>List item one</li>
          <li>List item two</li>
          <li>List item three</li>
        </ul>
      </div>
      <h3 tabindex="-1" aria-expanded="false" aria-selected="false" aria-controls="ui-id-8" id="ui-id-7" role="tab" class="ui-accordion-header ui-state-default ui-corner-all ui-accordion-icons"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>Section 4</h3>
      <div aria-hidden="true" role="tabpanel" aria-labelledby="ui-id-7" id="ui-id-8" style="display: none; height: 189.8px;" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
        <p>Cras dictum. Pellentesque habitant morbi tristique senectus et 
    netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis
     in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean 
    lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. 
    Integer dignissim consequat lectus. Class aptent taciti sociosqu ad 
    litora torquent per conubia nostra, per inceptos himenaeos. </p>
      </div>
    </div></p></td>
        <td width="33%">&nbsp;</td>
        <td width="33%">&nbsp;</td>
      </tr>
    </table>
    </body></html>

我想关闭＆＃34;取消＆＃34;按钮，

enter image description here

我尝试使用此代码来关闭它，

<script>
  $(function() {
    $( "#aas" ).accordion({
       disabled: true
    });
  });
  </script>

但它不起作用。请帮我。谢谢。

Answer 1

请改为尝试：

$(function() {
  $("#aas").click(function() {
      $("#accordion").accordion({active:false}).click();
      return false;
  });
});

如何通过单击按钮关闭可折叠

1 个答案: