我面临的问题是,在我的控制台上点击后,我首先看到这条消息“主线程上的同步XMLHttpRequest因其对最终用户体验的不利影响而被弃用”,之后每当我点击mainMenu项目时,我的默认ajax页面没有打开,我也在控制台中看到这个错误“未捕获错误:在初始化之前无法调用手风琴上的方法;试图调用方法'选项'”。我有点迷失在这个问题上,并没有弄清楚发生了什么。
这是我的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;
}
答案 0 :(得分:1)
最后修好了。问题不在于手风琴代码。问题是我为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调用的一些文件中,有些文件有这些脚本,因此应用程序上下文中有一个开关。我从这些文件中删除了这些标签,并确保只有具有手风琴的主页具有这些标签。它现在完美无缺