0

我有一个场景，我在一个表中针对每个客户端有多个下拉菜单，并且该表位于可滚动的 div 内。默认情况下，只有前 3 个客户端可见。当您在任何客户端上单击“操作”按钮时，它会在“操作”按钮下方为您提供子菜单。

如果我滚动 div，然后如果我在第 4、5 或第 6 个客户端上单击操作按钮，我会遇到麻烦，它会在操作按钮和子菜单之间留下空隙。

        <ul class="actionMenu" id="centralObjUL" >
       <li class="actionMenuLi" id="liAction" onclick="displaySubMenu(this)" >
          <a class="actionMenuLink" onkeydown="keydown('','Link1')" onblur="liOnblur(this.parentNode)" href="javascript:void(0);">Actions&nbsp;&nbsp;&nbsp;</a>
          <ul class="actionSubMenu" id="subMenu" style="display: none;">
             <li class="actionSubMenuLi">
                <a class="actionSubMenuLink" id="Link1"  onmousemove="fnMenuMouseMove(this)" onkeydown="keydown('Link1','Link2')" onfocus="aOnfocus(this,'subMenu')" onblur="aOnblur(this,'liAction')" href="javascript:void(0);">Client link 1</a>
             </li>
             <li class="actionSubMenuLi">
                <a class="actionSubMenuLink" id="Link2"  onmousemove="fnMenuMouseMove(this)" onkeydown="keydown('Link1','Link3')" onfocus="aOnfocus(this,'subMenu')" onblur="aOnblur(this,'liAction')" href="javascript:void(0);">Client link 2</a>
             </li>
             <li class="actionSubMenuLi">
                <a class="actionSubMenuLink" id="Link3"  onmousemove="fnMenuMouseMove(this)" onkeydown="keydown('Link2','Link4')"  onfocus="aOnfocus(this,'subMenu')" onblur="aOnblur(this,'liAction')" href="javascript:void(0);">Client link 3</a>
             </li>
             <li class="actionSubMenuLi">
                <a class="actionSubMenuLink" id="Link4"  onmousemove="fnMenuMouseMove(this)" onkeydown="keydown('Link3','PRFS')"  onfocus="aOnfocus(this,'subMenu')" onblur="aOnblur(this,'liAction')" href="javascript:void(0);">Client link 4</a>
             </li>
          </ul>
       </li>
    </ul>

这是此问题的示例：http: //jsfiddle.net/nkumar/M3MhW/

4

1 回答 1

0

问题是子菜单是绝对位置。您需要将子菜单与表格元素一起移动。

这里：

function displaySubMenu(li) {
    var objSubMenu = li.getElementsByTagName("ul")[0];
    //This would move the submenu
    objSubMenu.style.top=li.getBoundingClientRect().top+25+"px";
    objSubMenu.style.display = (objSubMenu.style.display == "block" ? "none" : "block");
}

希望有帮助。

于 2013-08-07T22:17:26.030 回答