我面临的问题是，在我的控制台上进行某些点击后，我首先看到这条消息“主线程上的同步 XMLHttpRequest 已被弃用，因为它对最终用户的体验有不利影响”，此后每当我点击 mainMenu 元素时，与此相关的我的默认 ajax 页面未打开，我还在控制台中看到此错误“未捕获错误:无法在初始化之前调用 Accordion 上的方法；试图调用方法‘选项’”。我有点迷失在这个问题中，还没有弄清楚发生了什么。
这是我的 jquery 部分:-
$(".accordion").accordion({collapsible:true, active:0, heightStyle: "content"});
$("#protocolParameters").load("generalSystemStatus.html");
$(document).on("click",".outerMenuItem",function(){
var currentlyActive=$( ".accordion" ).accordion( "option", "active" );
console.log("Current tab no. "+currentlyActive);
if(currentlyActive===0){
$("#protocolParameters").load("generalSystemStatus.html");
}
else if(currentlyActive===1){
$("#protocolParameters").load("networkEthernet.html");
}
else if(currentlyActive===2){
$("#protocolParameters").load("ntpDaemonStatus.html");
}
else if(currentlyActive===3){
$("#protocolParameters").load("ptpMaster.html");
}
else if(currentlyActive===4){
$("#protocolParameters").load("timingHardwareClockConfig.html");
}
else if(currentlyActive===5){
$("#protocolParameters").load("system.html");
}
else if(currentlyActive===6){
$("#protocolParameters").load("adminAlarm.html");
}
else {
$("#protocolParameters").load("/404.html .someError");
}
});
$(".outerMenuItem").click(function(){
if($(this).text()==="SYSTEM"){
console.log("System Clicked");
$("#protocolParameters").load("system.html");
}
});
$(".innerMenuItem").click(function () {
$(".innerMenuItem").removeClass("innerMenuItemOnClick");
$(this).addClass("innerMenuItemOnClick");
if ($(this).text() === "General") {
$("#protocolParameters").load("generalSystemStatus.html");
}
else if ($(this).text() === "Networks") {
$("#protocolParameters").load("networkStatus.html");
}
else if ($(this).text() === "Timing") {
$("#protocolParameters").load("timingStatus.html");
}
else if ($(this).text() === "GNSS") {
$("#protocolParameters").load("gpsStatus.html");
}
else if ($(this).text() === "PTP") {
$("#protocolParameters").load("ptpStatus.html");
}
else if ($(this).text() === "Alarms") {
$("#protocolParameters").load("alarmStatus.html");
}
else if ($(this).text() === "Ethernet") {
$("#protocolParameters").load("networkEthernet.html");
}
else if ($(this).text() === "SNMP") {
$("#protocolParameters").load("networkSnmp.html");
}
else if($(this).text()=== "NTP Daemon Status"){
$("#protocolParameters").load("ntpDaemonStatus.html");
}
else if($(this).text()=== "PTP Master"){
$("#protocolParameters").load("ptpMaster.html");
}
else if($(this).text()=== "PTP Slaves"){
$("#protocolParameters").load("ptpSlave.html");
}
else if($(this).text() === "Hardware Clock Configuration"){
$("#protocolParameters").load("timingHardwareClockConfig.html");
}
else if($(this).text() === "Holdover"){
$("#protocolParameters").load("timingHoldover.html");
}
else if($(this).text() === "System"){
$("#protocolParameters").load("system.html");
}
else if($(this).text()=== "Alarm"){
$("#protocolParameters").load("adminAlarm.html");
}
else if($(this).text()=== "Logging"){
$("#protocolParameters").load("adminLogging.html");
}
else if($(this).text()=== "Web Interface"){
$("#protocolParameters").load("adminWebInterface.html");
}
else if($(this).text()=== "User Management"){
$("#protocolParameters").load("adminUserManagement.html");
}
else{
$("#protocolParameters").load("/404.html .someError");
}
});
这是我的 html 部分:
<div class="accordion">
<h3 class="outerMenuItem"><div class="systemStatusNormal"></div>STATUS</h3>
<ul class="submenu">
<li><a class="innerMenuItem innerMenuItemOnClick" href="#!">General</a></li>
<li><a class="innerMenuItem" href="#!">Networks</a></li>
<li><a class="innerMenuItem" href="#!">Timing</a></li>
<li><a class="innerMenuItem" href="#!">GNSS</a></li>
<li><a class="innerMenuItem" href="#!">PTP</a></li>
<li><a class="innerMenuItem" href="#!">Alarms</a></li>
</ul>
<h3 class="outerMenuItem"><div class="systemStatusNormal"></div>NETWORK</h3>
<ul class="submenu" id="networkSubmenu">
<li><a class="innerMenuItem innerMenuItemOnClick" href="#!">Ethernet</a></li>
<li><a class="innerMenuItem" href="#!">SNMP</a></li>
</ul>
<h3 class="outerMenuItem" ><div class="systemStatusRisk"></div>NTP</h3>
<ul>
<li><a class="innerMenuItem innerMenuItemOnClick" href="#!">NTP Daemon Status</a> </li>
</ul>
<h3 class="outerMenuItem"><div class="systemStatusWarning"></div>PTP Management</h3>
<ul>
<li><a class="innerMenuItem innerMenuItemOnClick" href="#!">PTP Master</a> </li>
<li><a class="innerMenuItem" href="#!">PTP Slaves</a> </li>
</ul>
<h3 class="outerMenuItem"><div class="systemStatusNormal"></div>TIMING</h3>
<ul>
<li><a class="innerMenuItem innerMenuItemOnClick" href="#!">Hardware Clock Configuration</a> </li>
<li><a class="innerMenuItem" href="#!">Holdover</a> </li>
</ul>
<h3 class="outerMenuItem innerMenuItem"><div class="systemStatusNormal"></div>SYSTEM</h3>
<ul>
<li><a class="innerMenuItem innerMenuItemOnClick" href="#!">System</a></li>
</ul>
<h3 class="outerMenuItem"><div class="systemStatusNormal"></div>ADMIN</h3>
<ul>
<li><a class="innerMenuItem innerMenuItemOnClick" href="#!">Alarm</a></li>
<li><a class="innerMenuItem" href="#!">Logging</a></li>
<li><a class="innerMenuItem" href="#!">Web Interface</a></li>
<li><a class="innerMenuItem" href="#!">User Management</a></li>
</ul>
</div>
这是 css :-
#sidebarElementDivPicture{
height:152px;
}
a{
color: #3f3f4e;
font-weight: bold;
padding-left:15px;
}
a.innerMenuItem{
color: #363545;
}
a.innerMenuItemOnClick{
color:#eb5e13 !important;
}
.accordion .ui-icon{
display:none;
}
.accordion .ui-accordion-header{
height:30px;
position: relative;
z-index: 3;
width:200px;
}
.accordion .ui-accordion-header:hover{
color:#eb5e13;
}
.accordion .ui-accordion-header .ui-state-active{
color:#eb5e13;
}
.accordion .ui-accordion-content {
position: relative;
z-index: 6;
width:180px;
color:#eb5e13;
}
.accordion .ui-accordion-header:active{
color:#eb5e13;
}
#sidebar{
float:left;
padding-left:200px !important;
padding-top: 22px;
}
最佳答案
终于解决了。问题不在于 Accordion 代码。问题是我为 jquery 和 jquery ui 引用调用脚本标签的方式，即
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui/jquery-ui.min.js"></script>
在我通过 AJAX 调用的几个文件中，其中一些具有这些脚本，因此在应用程序上下文中有一个开关。我从那些文件中删除了这些标签，并确保只有我的主页有 Accordion 有这些标签。现在可以完美运行了
关于jquery - 单击一定次数后，我的 jquery ui Accordion 停止加载 ajax 页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32723283/