我的 jquery ui 手风琴在点击一定次数后停止加载 ajax 页面

Question

我面临的问题是，在我的控制台上进行某些点击后，我首先看到此消息 "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience"，此后每当我点击 mainMenu 项目时，我的默认 ajax 页面都没有打开，我也在控制台 "Uncaught Error: cannot call methods on accordion prior to initialization; attempted to call method 'option'" 中看到了这个错误。我有点迷失在这个问题中，还没有弄清楚发生了什么。

这是我的 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;
       }

Answer 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 调用的几个文件中，其中一些具有这些脚本，因此在应用程序上下文中有一个开关。我从那些文件中删除了这些标签，并确保只有我的主页有手风琴有这些标签。它现在完美运行

我的 jquery ui 手风琴在点击一定次数后停止加载 ajax 页面

My jquery ui accordion stops loading ajax pages after certain number of clicks

jquery

ajax

html

css

jquery-ui-accordion