JQuery UI手风琴无法正常工作。主菜单项显示为子菜单项

Question

http://jsfiddle.net/cxJW6/13/这是我的小提琴

这是html代码：

<div id="sidebar">
<ul  class="mainmenu">
    <div class="sidebarElementDiv">
        <div class="systemStatusNormal"> </div>
        <li class="sub-handle"><a class="sub-link" href="#!">STATUS</a>
            <ul class="submenu">
                <li class="sub-li"><a class="innerMenuItem" href="#!">General</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!" id="statusNetwork">Network</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">Timing</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">GNSS</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">PTP</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">Alarms</a></li>
            </ul>

        </li>   <!--End of STATUS li-->
    </div>  <!--End of sidebarElementDiv-->

    <div class="sidebarElementDiv">
        <div class="systemStatusNormal"> </div>
        <li class="sub-handle"><a class="sub-link" href="#!">NETWORK</a>
            <ul class="submenu">
                <li class="sub-li"><a class="innerMenuItem" href="#!">Ethernet</a> </li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">SNMP</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">Ping</a></li>
            </ul>
        </li>
    </div>

    <div class="sidebarElementDiv">
        <div class="systemStatusWarning"> </div>
        <li class="sub-handle"><a class="sub-link" href="#!">NTP</a>
            <ul class="submenu">
                <li class="sub-li"><a class="innerMenuItem" href="#!">NTP Daemon Status</a> </li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">NTP Associations</a> </li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">NTP Config </a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">NTP MD5 Security Key </a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">NTP Autokey</a> </li>
            </ul>
        </li>
    </div>

    <div class="sidebarElementDiv">
        <div class="systemStatusRisk"> </div>
        <li class="sub-handle"><a class="sub-link" href="#!">PTP</a>
            <ul class="submenu">
                <li class="sub-li"><a class="innerMenuItem" href="#!">PTP Master</a> </li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">PTP Slaves</a> </li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">Performance</a> </li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">Save Restore</a> </li>
            </ul>
        </li>
    </div>

    <div class="sidebarElementDiv">
        <div class="systemStatusNormal"> </div>
        <li class="sub-handle"><a class="sub-link" href="#!">TIMING</a>
            <ul class="submenu">
                <li class="sub-li"><a class="innerMenuItem" href="#!">Time Zone</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">HW Clock</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">Holdover</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">Sysplex</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">Time Interval</a></li>
            </ul>
        </li>
    </div>

    <div class="sidebarElementDiv">
        <div class="systemStatusNormal"> </div>
        <li class="sub-handle"><a class="sub-link" href="#!">REFERENCES</a>
            <ul class="submenu">
                <li class="sub-li"><a class="innerMenuItem" href="#!">Timecode</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">Modem</a> </li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">LF Radio</a> </li>
            </ul>
        </li>
    </div>

    <div class="sidebarElementDiv">
        <div class="systemStatusNormal"> </div>
        <li class="sub-handle"><a class="sub-link" href="#!">SYSTEM</a>
            <ul class="submenu">
                <li class="sub-li"><a class="innerMenuItem" href="#!">General</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">Upgrade</a> </li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">Factory Reset</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">Options</a></li>
            </ul>
        </li>
    </div>

    <div class="sidebarElementDiv">
        <div class="systemStatusNormal"> </div>
        <li class="sub-handle"><a class="sub-link" href="#!">ADMIN</a>
            <ul class="submenu">
                <li class="sub-li"><a class="innerMenuItem" href="#!">Web</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">Users</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">Alarms</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">Logs Config</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">Relays</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">Radius</a></li>
            </ul>
        </li>
    </div>

    <div class="sidebarElementDiv">
        <div class="systemStatusNormal"> </div>
        <li class="sub-handle"><a class="sub-link" href="#!">SERVICES</a>
            <ul class="submenu">
                <li class="sub-li"><a class="innerMenuItem" href="#!">Startup</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">HTTP</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">SSH</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">Email</a></li>
            </ul>
        </li>
    </div>

    <div class="sidebarElementDiv">
        <div class="systemStatusNormal"> </div>
        <li class="sub-handle"><a class="sub-link" href="#!">WIZARDS</a>
            <ul class="submenu">
                <li class="sub-li"><a class="innerMenuItem" href="#!">1st Setup</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">NTP</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">SNMP</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">Backup</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">Restore</a></li>
                <li class="sub-li"><a class="innerMenuItem" href="#!">Upgrade</a></li>
            </ul>
        </li>
    </div>

    <div id="sidebarElementDivPicture" class="sidebarElementDiv">
        <div id="systemStatusNormalHeight" class="systemStatusNormal"> </div>
        <p>Placeholder for product image</p>
    </div>
</ul>

这是jquery脚本： -

$( ".sidebarElementDiv" ).accordion();

基本上我想把主菜单项作为手风琴的标题，当我点击时我的子菜单项应该出现。

Answer 1

<div id="sidebarElementDiv">
  <h3>STATUS</h3>
  <div>
     <ul class="submenu">
          <li class="sub-li"><a class="innerMenuItem" href="#!">General</a></li>
          <li class="sub-li"><a class="innerMenuItem" href="#!" id="statusNetwork">Network</a></li>
          <li class="sub-li"><a class="innerMenuItem" href="#!">Timing</a></li>
          <li class="sub-li"><a class="innerMenuItem" href="#!">GNSS</a></li>
          <li class="sub-li"><a class="innerMenuItem" href="#!">PTP</a></li>
          <li class="sub-li"><a class="innerMenuItem" href="#!">Alarms</a></li>
     </ul>
  </div>
  <h3>NETWORK</h3>
  <div>
    <ul class="submenu">
        <li class="sub-li"><a class="innerMenuItem" href="#!">Ethernet</a> </li>
        <li class="sub-li"><a class="innerMenuItem" href="#!">SNMP</a></li>
        <li class="sub-li"><a class="innerMenuItem" href="#!">Ping</a></li>
    </ul>
  </div>
</div>