嵌套的JQuery Accordion bugfix无效

时间:2014-09-09 09:25:20

标签: jquery accordion

我想使用此修复程序来使用嵌套的手风琴

$( "#accordion" ).accordion({
    header: "> h3:not(.item)",
    heightStyle: "content",
    active: false,
    collapsible: true
   });
});

在这里你可以看到我的HTML代码。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>test</title>
  <link rel="stylesheet" href="jquery-ui.css">
  <script src="jquery-2.1.1.min.js"></script>
  <script src="jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#accordion" ).accordion({
    header: "h3:not(.item)",
    heightStyle: "content",
    active: false,
    collapsible: true
    });
  });
  </script>
</head>
<body>

<div id="accordion">
  <h3>test1</h3>
  <div>
    <p>testcon1</p>
  <div id="accordion">
      <h3>jojoba</h3>
      <div>jojobacon</div>
  </div>
  </div>

  <h3>test2</h3>
  <div>
    <p>testcont2</p>
  </div>
</div>

</body>
</html>

每次当我想打开荷荷巴手风琴时它都会移开,所以我再也看不到它了。 我正在使用谷歌浏览器。

谢谢

1 个答案:

答案 0 :(得分:0)

这是正常工作删除标题部分

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>test</title>
  <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
  <script>
  $(function() {
    $( "#accordion" ).accordion({

    heightStyle: "content",
    active: false,
    collapsible: true
    });
    $( "#accordion1" ).accordion({

    heightStyle: "content",
    active: false,
    collapsible: true
    });
  });
  </script>
</head>
<body>

<div id="accordion">
  <h3>test1</h3>
  <div>
    <p>testcon1</p>
  <div id="accordion1">
      <h3>jojoba</h3>
      <div>jojobacon</div>
  </div>
  </div>

  <h3>test2</h3>
  <div>
    <p>testcont2</p>
  </div>
</div>

</body>
</html>