Question

编辑以更新为附加到id并添加.accordion代码。

我正在使用Jqueryui并构建动态的手风琴列表。单击时，内容是带有唯一标记的php页面。以下是创建一系列手风琴的javascript的一部分：（请注意，为了方便阅读，添加了回车符）

$('<h3 style="background:black;color:white;padding:2px;">
<a hidden href="subpage.php?crs='+val.idrepro+'"></a>
<div style="display:table-cell;padding-right:12px;vertical-align:middle;">
<p class="ui-icon ui-icon-circle-check" style="zoom:2;margin:0;" title="'+val.idrepro+'"></p>
</div></h3>
<div>Loading... Please wait.</div>').appendTo('#accord');

大约一百种手风琴标题中的val.idrepro都不同。

$( "#accord" ).accordion({
    collapsible: true,
    active : false,
    icons: null,
    heightStyle: "content",
    activate: function (e, ui) {
      $url = $(ui.newHeader[0]).children('a').attr('href');
  $.get($url, function (data) {
     $(ui.newHeader[0]).next().html(data);
      });
    }
 });

我遇到的问题是，在第一次单击手风琴时，子页面上的所有按钮都可以正常工作，但是一旦加载了多个手风琴选项，这些按钮就会停止工作，或者停止工作的次数特定的手风琴标题会被打开和关闭，因为负载决定了您必须单击按钮多少次才能发生某些事情。

我有一些启动模式表单的按钮。如果循环了一个以上的手风琴，则可能需要单击模式2、3、4等的按钮才能弹出模式。

我很困惑。

Answer 1

问题是您正在尝试将项目追加到类中。类选择器选择具有该类的所有项目，而您必须使用ID。

Answer 2

好了。我的子php页面具有标题信息，该信息再次调用了jqueryui脚本。删除标题数据解决了该问题。该页面原本是设计为在单独的窗口中加载的，但在我看来，手风琴调用时不会引起冲突。

我删除了对父级多余的所有代码。代码已删除：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO8859-15" />
<title><?echo($repname = $repsetupa['name']);?></title>
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="js/jquery-ui-1.12.1.custom/jquery-ui.css" />
<style>
.ui-controlgroup-vertical {width: 150px;}
.ui-controlgroup.ui-controlgroup-vertical > button.ui-button,
.ui-controlgroup.ui-controlgroup-vertical > .ui-controlgroup-label {text-align: center;}
#car-type-button {width: 120px;}
.ui-controlgroup-horizontal .ui-spinner-input {width: 20px;}
.ui-tooltip, .arrow:after {background: black;border: 2px solid white;}
.ui-tooltip {padding: 10px 20px;color: white;border-radius: 20px;
    font: bold 14px "Helvetica Neue", Sans-Serif;text-transform: uppercase;
    box-shadow: 0 0 7px black;
}
.arrow {width:70px;height:16px;overflow:hidden;position: absolute;
    left: 50%;margin-left: -35px;bottom: -16px;
}
.arrow.top {top: -16px;bottom: auto;}
.arrow.left {left: 20%;}
.arrow:after {content: "";position: absolute;left: 20px;top: -20px;width: 25px;
    height: 25px;box-shadow: 6px 5px 9px -9px black;-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);transform: rotate(45deg);
  }
.arrow.top:after {bottom: -20px;top: auto;}
.overflow {height:200px;overflow-y:scroll;overflow-x:hidden;}
.custom-combobox{position: relative;display: inline-block;}
.custom-combobox-toggle{position: absolute;top: 0;bottom: 0;
    margin-left: -1px;padding: 0;}
.custom-combobox-input{margin: 0;padding: 5px 10px;}
.ui-autocomplete{overflow-y:scroll;height:200px;overflow-x:hidden;}
</style>
<script src="js/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script src="js/jPages.js"></script>

jqueryui手风琴动态内容行为

2 个答案: