Question

这是我的jsbin https://jsbin.com/dukoqajuce/edit?html,css,js,output

当我点击主菜单时，我想要做的是打开我的子菜单列表。然而，它确实弹出，但被主要div重写。有人能发现问题吗？

这是html代码

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
 <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
 <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script><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>

Answer 1

您需要删除.sidebarElementDiv上的z-index。当ul显示时，它会导致子菜单显示在下面。

Jquery UI Accordion的子菜单项列表正被标题div覆盖

1 个答案: